Vue2 到 Vue3 升级插件gogocode-plugin-vue
配合gogocode-cli使用
开始迁移
Vue3的到来为我们带来了许多惊喜的变化,但是由于Vue3对于Vue2在Api层面存在诸多兼容问题,并不能做到平滑升级。所以我们根据v3迁移指南利用gogocode这个代码转换利器,利用它操作AST,开发了一套Vue2升级工具。利用这套工具能够快速地把你的Vue2代码升级到Vue3。
这套工具使用非常简单,只需要执行简单的命令就可以了。
安装工具
全局安装最新的 gogocode-cli
npm install gogocode-cli -g
迁移源文件
在终端(terminal)中跳转到需要升级的Vue项目路径。如果需要升级src路径下的vue代码,执行如下命令:
注意:-s 后面是原文件的目录/文件名,-o 后面是输出的目录/文件名,如果两者相同,转换插件会覆盖你的代码,在此操作前请做好备份。
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
转换操作执行完毕后新的Vue3代码会被写入到src-out目录中。
指定应用规则
添加参数 -p include-rules=xxx,yyy
,举例只应用 vModel
及 customDirectives
规则:
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out -p include-rules=vModel,customDirectives
规则名称请参看 rules.js 里面的 name
字段。
排除应用规则
添加参数 -p exclude-rules=xxx,yyy
,举例只排除 vModel
及 customDirectives
规则:
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out -p exclude-rules=vModel,customDirectives
规则名称请参看 rules.js 里面的 name
字段。
依赖升级
除了升级源码,我们还需要升级 Vue3 相关依赖,这一点也可以自动完成,在终端(terminal)中跳转到需要升级的Vue项目路径,执行如下命令:
gogocode -s package.json -t gogocode-plugin-vue -o package.json
这条命令会帮你把 package.json 里面的 Vue/Vuex/Vue-router/Vue 编译工具 升级到适配 Vue3 的版本
npm install
即可完成Vue3相关依赖的安装
注意:如果你是使用老版本的 vue-cli 生成的项目,需要自行升级 vue-cli 以确保 Vue3 项目能成功被构建,可参考:vue-cli2的项目升级到vue-cli4做了哪些事情、Migrating from v3
需要关注的地方
我们尽可能让工具自动化,但有些问题还是需要你注意一下。
全局 App
由于 Vue3 全局对象变成 createApp()
创建。转换工具将 createApp()
返回对象传递给 window.$vueApp
。此时使用者需要将window.$vueApp = Vue.createApp(App)
代码块移动到调用 window.$vueApp
代码的最前面。避免window.$vueApp
为 undefined
的情况出现。
依赖的 Vue2 组件库需自行升级
一些依赖于 Vue2 开发的组件库也推出了 Vue3 的版本,它们的 API 发生了一些变化,这需要你手动升级。
做好检查和测试
另外,由于是静态的代码转换,可能你的代码里会有些我们没想到的写法导致转换出乱子,转换后请做好人工比对和测试!发现转换的问题可以提交给我们。
其他项目
其它项目升级请参考Vue官方链接
转换规则覆盖
规则 | 转换支持 | 文档 |
---|---|---|
v-for 中的 Ref 数组 | ✔ | 链接 |
异步组件 | ✔ | 链接 |
attribute 强制行为 | ✔ | 链接 |
$attrs包含class&style | ✔ | 链接 |
$children | ✖️ | 链接 |
自定义指令 | ✔ | 链接 |
自定义元素交互 | 无需转换 | 链接 |
Data 选项 | ✔ | 链接 |
emits选项 | ✔ | 链接 |
事件 API | ✔ | 链接 |
过滤器 | ✔ | 链接 |
片段 | ✔ | 链接 |
函数式组件 | ✔ | 链接 |
全局 API | ✔ | 链接 |
全局 API Treeshaking | ✔ | 链接 |
内联模板 Attribute | ✖️ | 链接 |
keyattribute | ✔ | 链接 |
按键修饰符 | ✔ | 链接 |
移除$listeners | ✔ | 链接 |
挂载API变化 | ✔ | 链接 |
propsData | 开发中 | 链接 |
在 prop 的默认函数中访问this | 无需转换 | 链接 |
渲染函数 API | ✔ | 链接 |
插槽统一 | ✔ | 链接 |
Suspense | 无需转换 | 链接 |
过渡的 class 名更改 | ✔ | 链接 |
Transition 作为 Root | 开发中 | 链接 |
Transition Group 根元素 | ✔ | 链接 |
移除v-on.native修饰符 | ✔ | 链接 |
v-model | ✔ | 链接 |
v-if 与 v-for 的优先级对比 | ✔ | 链接 |
v-bind 合并行为 | ✔ | 链接 |
VNode 生命周期事件 | 开发中 | 链接 |
Watch on Arrays | ✔ | 链接 |
vuex | ✔ | 链接 |
vue-router | ✔ | 链接 |
参考
https://github.com/thx/gogocode/tree/main/packages/gogocode-plugin-vue