gogocode-plugin-vue-pre

Vue2 到 Vue3 升级插件

配合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目录中。

依赖升级

除了升级源码，我们还需要升级 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	✔	链接

联系我们

如果你在使用过程中遇到其他问题可以通过如下方式联系我们：

github: https://github.com/thx/gogocode/issues

钉钉群：34266233

gogocode 转换问题可以分享https://play.gogocode.io/相关链接给我们

相关文档

vue-cli升级