Vue2 项目 迁移到 Vue3 的方法记录 包含element-ui

由于element-ui 未对 Vue3 兼容，导致官方提供的构建版本不能使用
下面手动进行迁移

决定升级前请确保项目所有依赖都有替代方法
Vue特性变更，官网会给出解决方法
特别注意第三方UI相关依赖

vue2 改为 vue3 以及 相应的依赖修改

1. vue@next ， 组件 @vue/compiler-sfc （Vue2：vue-template-compiler）
2. element-ui 换成 element-plus
3. vue router 的版本 @next -> 4.x
4. vuex 版本 @next -> 4.x
5. @vue/cli-service 升到最新版本

对配置进行修改：

1. Vue相关

main.js

import { createApp } from 'vue' // import Vue from 'vue'

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/theme-chalk/index.css'

import router from './router'
/* Vue2 的创建方式 
new Vue({
    router,
    render: h => h(App)
}).$mount('#app'); */
const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus, { size: 'default', zIndex: 3000, locale: zhCn })
app.mount('#app')

• 项目内查找 ’Vue‘ 寻找替换方案
  多数使用app调用
  import { ElMessageBox } from 'element-plus' 代替直接通过 Vue 访问

• xxx.sync 不再支持， 需要转化为 v-model:xxx

• vue2.6 以前的 slot 和 slot-scope 改用 v-slot 方式 简写#

• 移除事件总线 $on、$once、$off、 替代品
  Provide 和 inject 允许一个组件与它的插槽内容进行通信
  vuex

• 过滤器 (filter) 移除
  可使用计算属性或methods

• keep-alive 用法

vue2
<transition
  name="move"
  mode="out-in"
>
  <keep-alive :include="tagsList">
   <router-view :key="$route.fullPath"></router-view>
  </keep-alive>
</transition>

vue3
<router-view
  :key="$route.fullPath"
  v-slot="{ Component }"
>
  <transition
    name="move"
    mode="out-in"
  >
    <keep-alive :include="tagsList">
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

• ::v-deep 弃用 :deep() 代替
  >>> /deep/ 同理
• $set 和 $delete 被移除
• $children弃用 通 $refs链访问

更多详细不兼容变更

2. vue-router

/* 
import Vue from 'vue'
import Router from 'vue-router' */
import { createRouter, createWebHashHistory } from 'vue-router'

/* Vue.use(Router) */

export const baseRouters = ···
// path: '*', 不再建议使用 '*' 使用 '/:catchAll(.*)' 替代


/* export default new Router({
 routes: baseRouters
}) */
const router = createRouter({
    history: createWebHashHistory(),
    routes: baseRouters
})

export default router

vue-router 详细变化

3. vuex

import { createStore } from 'vuex'

export default createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

// main.js
const app = createApp({ /* 根组件 */ })

// 将 store 实例作为插件安装
app.use(store)

处理 element 两者不兼容的代码

1. el-subMenu --> el-sub-menu

2. .sync

• el-dialog 和 el-pagination 下 .sync修饰符方式 改为用 v-model （.sync Vue3已移除）

  注: el-dialog 的 visible 直接使用 v-model 控制

3. el-date-picker

1. picker-options 拆分
   el-date-picker 移除了 picker-options 转而将它们拆分成单个选项进行配置，如 shortcuts

   // shortcuts
   {text: xx, value: function() {}}
   

2. 移除了 align
3. el-date-picker value-format
el-date-picker 属性 value-format 发生变化

占位符	输出	详情
YY	18	两位数的年份
YYYY	2018	四位数的年份
M	1-12	月份，从 1 开始
MM	01-12	月份，两位数
MMM	Jan-Dec	缩写的月份名称
MMMM	January-December	完整的月份名称
D	1-31	月份里的一天
DD	01-31	月份里的一天，两位数
d	0-6	一周中的一天，星期天是 0
dd	Su-Sa	最简写的星期几
ddd	Sun-Sat	简写的星期几
dddd	Sunday-Saturday	星期几
H	0-23	小时
HH	00-23	小时，两位数
h	1-12	小时, 12 小时制
hh	01-12	小时, 12 小时制, 两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒 两位数
SSS	000-999	毫秒 三位数
Z	+05:00	UTC 的偏移量，±HH:mm
ZZ	+0500	UTC 的偏移量，±HHmm
A	AM PM
a	am pm

4. el-tag type

• el-tag type属性可选值发生变化 success/info/warning/danger

以上仅为我所遇到element不兼容，详细请参见

5. icon 不再直接通过字符串

得引入 @element-plus/icons-vue
再做相应的修改

vue-echarts

确保 echarts 版本 5 以上

// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts) // Vue.component('v-chart', ECharts)