Vue2升级Vue3 --- gogocode工具使用体验_洛千陨的博客-程序员秘密

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变更中进一步说明）

本文链接：https://blog.csdn.net/qq_44242707/article/details/122742884

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【人工智能】UC Berkeley 2021春季 CS188 Project 2: Multi-Agent Search Pacman吃豆人游戏_ucb人工智能pacman_夹小汁的博客-程序员秘密

本题目来源于UC Berkeley 2021春季 CS188 Artificial Intelligence Project2上的内容。

MyBatis-Plus中解决表名或字段名不一致_mybatis类名表名不一致_Shen-Childe的博客-程序员秘密

MyBatis-Plus中解决表名或字段名不一致

vim 小技巧几则_周小树的博客-程序员秘密

1. 头文件和源文件到跳转: gf如果.h 和.cpp在同一目录下，直接在头文件上使用gf快捷键，如果不在，在.vimrc在中设置set path+=headPathheadPath为头文件目录2. 局部变量跳转： gd3. ctags生成数据库：参看 omnicppcomplete 提供的ctags生成语句：ctags -R --c+

centos6.5将python2.6.6升级到python2.7以及easy_install和pip_dengkaikaikai的博客-程序员秘密

今天在安装celery billboard版本的时候，竟然报了这样的错误： “Versions of Python before 2.7 are not supported” 意思是python2.7之前的版本是都不支持的，因此我果断决定将python升级到python2.7。升级的过程中还是遇到了一些问题，后来参考了这篇博文顺利地实现了升级： Centos 6.x 升级python到

arcpy投影(一)——prj、gtf文件定义、路径及解析（arcmap,arcpro）_prj文件__Oak_Tree_的博客-程序员秘密

对ArcMap 及Arcpro中的prj投影文件和gtf投影变换关系文件进行了路径说明和内容解析

cview类 public_MFC学习笔记_侯戈的博客-程序员秘密

1 概述本文档是在学习<>MFC过程中临时写的一篇文档，并没有真正的深入。本文档结合VC9单文档程序来写的。2 MFC六大技术对应<>的第三章。2.1 MFC程序的初始化过程2.1.1 _tWinMain_tWinMain(…){returnAfxWinMain(…);}从代码可以看到，该函数仅调用了AfxMain函数。_tWinMain是被C/C++运行期函数调用的，这里...