1.简介及使用
- 简介:阿里妈妈开发的一个vue2代码转vue3代码的工具
- 项目地址: https://github.com/thx/gogocode
- 使用文档:https://gogocode.io/zh/docs/vue/vue2-to-vue3
- 项目版本:v1.0.45
- 使用流程:
npm install gogocode-cli -g // 安装工具
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out // 升级代码
gogocode -s package.json -t gogocode-plugin-vue -o package.json // 升级配置文件
npm install // 安装升级
1.可能存在转化停顿情况,需要排查转换卡住的文件并暂时删除从而转化成功;
2.代码转换将根据gogocode内置的风格进行转换,可能改变原有代码的代码风格;
3.同时因为gogocode仍处于迭代过程中,不同版本会造成升级的效果有差异;
2.主要语法转换
语法转换 | 优点 | 缺陷 |
---|---|---|
v-model | 父组件绑定: v-model => v-model:value 子组件触发: input => update:value | - |
生命周期 | beforeDestroy => beforeUnmount destroyed => unmounted | - |
\$listener | v-bind="\$listener" => v-bind="\$attrs" | - |
事件API | 生成代理文件代理事件API并引入 Bus.\$emit('') => \$emit(Bus,'') | 子组件触发事件错误转换 this.\$emit('') => \$emit(this,'') |
emit选项 | 子组件触发事件写入选项中 | 事件API事件也写入选项中 |
异步组件 | () => import('') 转化 Vue.defineAsyncComponent(() => import('')) | 仍需手动引入defineAsyncComponent 并去掉Vue |
slot插槽 | slot="name" => v-slot:name | slot-scope未转换 |
3.其他配置转换
- 启动文件index.js: 结合gogocode以及手动修改
// 创建Vue实例移动到头部
window.$vueApp = Vue.createApp(App)
window.$vueApp.use(router) // router在挂载之前,否则无法渲染
window.$vueApp.mount('#app')
window.$vueApp.use(store)
// 兼容就this.$http调用方法
// Vue2语法转化:Vue.use(v => { v.prototype.$http = axios })
window.$vueApp.config.globalProperties.$http = axios
window.$vueApp.use(less)
window.$vueApp.use(Antd)
window.$vueApp.use(Contextmenu)
window.$vueApp.component('draggable', draggable)
window.moment = moment
- router:结合gogocode以及手动修改
// 404页面路径调整
path: '*' => path: '/:catchAll(.*)'
// 与 2.x 不同,loader 函数不再接收 resolve 和 reject 参数
component: (resolve) => {
require.ensure([], () => {
return resolve(require('@views/login/Index.vue'))
}, 'login')
}
=>
component: () => import('@views/login/Index.vue'),
总结:
1.使用该工具能够减少一定的升级工作量,但是同时会产生其他一些未知的隐患,使用过程中需要对转换后的代码进行排查。目前针对大型项目还是优先手动升级
2.若不采用该工具进行一键转换,该工具有单独可取之处,比如:自动生成的事件API代理文件以及package.json变更等(该文件执行命令转换后仍有问题,将在vue3变更中进一步说明)