0 按

我之前写过一篇经验介绍，基于 vue3+ts ，使用taro来书写小程序。https://www.yuque.com/go/doc/33888643

在当时技术调研时候发现了 vue-mini ，他的特点：只依赖 @vue/reactivity ，实现了和 composition api 一样的api能力。当时时间比较紧张，对这个不是很熟悉，出于谨慎考虑就没有选择这个技术方向。

今天有空，来试试这个技术方案。

那么正式开始吧。

1 基础概念

特点

Vue Mini 像写 Vue 3 一样写小程序

特点：

  • 响应式。基于 @vue/reactivity 的响应式能力，不再需要 setData。
  • 渐进式。与小程序原生语法完全兼容，你可以渐进的采用，无需大规模重写。
  • 小巧。Minify 后仅 18KB，不会占用你宝贵的小程序尺寸。

Vue Mini 是一个基于 Vue 3 的小程序开发库，它能让你用 Composition API 写小程序。与某些小程序开发方案不同的是 Vue Mini 仅仅是一个轻量的运行时库，它既不依赖任何编译步骤，也不涉及任何 Virtual DOM。并且 Vue Mini 从一开始就被设计为能跟小程序原生语法协同工作，你甚至能在同一个页面或组件内混用原生语法与 Vue Mini，这能让你很轻松的将其整合进既有项目中。当然，你也能完全使用 Vue Mini 开发一个小程序。

Vue Mini 仅聚焦于小程序逻辑部分，也就是 JS 部分，它并不影响小程序的模版、样式及配置。

基本原理

依赖 reactiviety 这个独立的库，最终还是走 setData 这一套。

按照文档跑一跑demo。

项目很容易启动了，观察一下项目的 package.json :

  • scripts 部分，lint一套，tsc一套，基于 node build 进行构建打包
  • 依赖。polyfill一套和 @vue-mini/wechat@0.2.0
  • 开发依赖。babel、rollup/jest/eslint/jest ，还有些依赖不熟悉

    构建过程

看下 build.js 文件，这个文件是把vue项目编译成普通小程序项目。不感兴趣的话就略过吧。

  • 移入依赖
  • 环境变量判断
  • 错误处理
  • function
    • getLocalIP
    • getImagePathWithHash
    • Set bundledModules=[]
    • bundleModule 处理npm模块
      • 过滤完成，维护数组
      • 如果是特定的库单独处理，先忽略
      • 使用rollup.rollup()
      • 写入对应的npm模块中
    • processScript(filePath) 处理脚本
      • 使用babel转译，得到code
      • 循环处理遇到的require参与bundle
      • 如果生产就压缩
      • 处理生成这里没看懂，复制和移动
    • processTemplate 处理模板
      • 获取source
      • 利用posthtml 得到处理后的html
      • 文件生成
    • processStyle
      • 获取source
      • 追加 import导入less文件
      • 转译less
      • 经过postcss 处理
      • 文件生成
    • recompileStyles
      • 利用chokidar 监听样式增加，随时编译
    • dev
      • 先移除dist
      • ts文件就走processScript
      • wxml 走 processTemplate
      • less 走 processStyle
      • 文件移动
      • 监听图片变化
    • prod

没啥黑科技，常规web项目。