vue2 老项目迁移vue3 记录，vue3 + elenent-plus

背景

为什么要将老项目迁移vue3呢？

1. 尤大大回答为什么重写vue2

• 主流浏览器对新的JavaScript语言特性的普遍支持。
• 当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题

2. vue3的优点

• 更强的性能，更好的 tree shaking
• Composition API + setup
• 更好地支持 TypeScript

3. 公司项目这个老项目，开始还是后端同学写的，后面经历多位开发，项目的凌乱程度可想而知。为了提高项目的稳定性与可维护性，决定进行代码整合和升级。

⚠️重点：本文将主要描述如何对vue2项目进行升级。只是完成了升级保证了兼容性，还没有进行ts、setup写法的改造

迁移过程和步骤

内容和周期拆分

在正式迁移工作开始之前，结合项目大小进行工作内容的拆分和时间评估，如下

1. 梳理系统现有文件组件【5个工作日】
   1. 对存在的重复或者重复率较高的组件，进行组件优化整合
   2. 区分有效文件组件/无效文件组件【保留有效组件、删除无效组件】
2. 安装升级工具与配置【2个工作日】
   1. vue3安装
   2. vuex升级4.x
   3. vue-router升级4.x
3. 升级后细节调整 【5个工作日】
4. 升级UI框架element-plus与调整【5个工作日】
5. 新功能合并与测试

技术栈： vue3 + elenent-plus

	旧版本	新版本	新版本官网介绍	迁移帮助文档
vue	2.6.11	3.2.29	v3.cn.vuejs.org/guide/intro…	v3.cn.vuejs.org/guide/migra…
vuex	3.6.0	4.0.2	vuex.vuejs.org/	vuex.vuejs.org/guide/migra…
vue-router	3.3.4	4.0.12	router.vuejs.org/zh/guide/	router.vuejs.org/zh/guide/mi…
element	element-ui 2.14.0	element-plus 2.0.1	element-plus.gitee.io/zh-CN/guide…

迁移过程

😊 本次迁移过程是参考vue官方的迁移帮助文档进行

首先升级工具

1. vue2升级

• 删除vue-template-compiler
• 安装 vue":"^3.1.0"
• 安装 "vue-loader":"^17.0.0"
• 安装"@vue/compat": "^3.1.0"

2. vue-router升级vue4.x（vue-router":"^4.0.12",）
3. vuex升级4.x（"vuex":"^4.0.2"）

其次兼容性配置

调整webpack的配置

然后修复错误

修复编译时遇到的警告

更新应用的入口使用新的全局挂载API（createApp）

调整vue-router写法（从 Vue2 迁移） router-view 和 keep-alive 结合写法

然后细节调整（文档中的细节）

• v-deep 替换deep()
• Vue.prototype替换为app.config.globalProperties
• watch 数组需要显性声明deep:true
• template v-for 的 key 设置在 template 标签上
• slot 调整为 v-slot(简写 #)
• .sync 替换为 v-model
• render h 函数引入方式调整
• 删除 filters 替换为methods方法
• 删除 $on，$off 和 $once 实例方法，vue3.x不再支持
• 删除 $set()$delete() 方法，vue3.x不再支持
• 删除 .native使用，vue会自动添加到根元素 ，vue3.x不再支持
• 删除$children，vue3.x不再支持。如果你需要访问子组件实例，建议使用$refs。
• 自定义指令 调整 移除之前的bind、inserted、update等，新增或者替换生命周期如created、beforeMount、updated等
• emits 选项，这个选项可以用来定义一个组件可以向其父组件触发的事件

然后升级element-plus的相关问题

• icon 引入方式改变

• el-submenu 替换为el-sub-menu

• 删除 element 组件 size 属性 && 现已不支持 size:mini

• slot 方式改变

  • el-table slot-scope替换为#default="scope"
  • el-tabs @tab-click name 替换为 paneName
  • el-dialog slot footer 替换为 #footer
  • el-tooltip slot content 替换为 #content
  • el-form-item slot label 替换为 #label
  • el-tab-pane slot label 替换为 #label

• 样式的调整

感谢😘