Vue2迁移vue3操作指南

#一、前言

有个自动化迁移工具gogocode-cli，尝试后发现不好用且得不偿失，就放弃了，感兴趣的可以去了解一下，本指南选择手动迁移

迁移开始之前，我们先来梳理下思路：

现在有一个vue2的项目，
首先我们升级框架，
得到了一个vue3的框架，但是上面放着vue2的代码，跑不起来，
然后我们安装并配置迁移构建版本（@vue/compat），
通过它能够在vue3的框架上跑绝大多数vue2的代码（兼容与否可自行配置）
接下来我们逐个迁移，将vue2的代码替换成vue3的写法，
如果项目中有必须依赖vue2的东西，就只能通过迁移构建版本兼容，
如果能完全vue3化，则迁移完毕后，删除迁移构建版本

注意，如果跟着本文档一步步迁移，则中途可以先不运行项目，将已知的迁移步骤完成后，再运行项目，解决剩余没有提及到的可能存在的问题

#二、迁移过程

#1.升级依赖

修改package.json文件（仅供参考，如果你项目用了不同的依赖配置，升级成适配vue3的就行了）

• 升级vue、vuex、vue-router、@vue/cli-service
• 新增@vue/compat
• 替换element-ui 为 element-plus
• 替换vue-template-compiler 为 @vue/compiler-sfc
• 删除@babel/plugin-transform-runtime （因为@vue/cli-plugin-babel里本就包含了它）

然后删除node_modules，删除lock文件，重新执行npm install

这里可以先暂时不考虑其他依赖的升级适配，放到后面进行

参考代码：