此篇為 《Vue2+ElementUI 自動(dòng)轉(zhuǎn) Vue3+ElementPlus（GoGoCode）》 的擴(kuò)展！

Vue3 適配

Vue3 不兼容適配

Vue 3 遷移指南 在此，本章只講述項(xiàng)目或組件庫(kù)中遇到的問(wèn)題；

1. Vue3 移除 $on，$off 和 $once 實(shí)例方法，事件總線Bus的差異；

2. Vue3 CSS 深度選擇器 有變化，有警告[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

   /* Vue2 寫(xiě)法一 */
   .a >>>.b
   /* Vue2 寫(xiě)法二 */
   .a /deep/ .b/* Vue3 寫(xiě)法*/
   .a :deep(.b) 
   

3. Vue props 多個(gè)類型，不要用 | ，用數(shù)組 []。否則報(bào)錯(cuò) expected "indent", got "eos"

   expandLevel: {// type: Number | String,// vue2 可以，vue3 報(bào)錯(cuò)type: [Number, String], // vue2/vue3 正確default: 1,
   }
   

GoGoCode 自動(dòng)升級(jí)適配

1. v-model:value 報(bào)錯(cuò)，全局搜 v-model:value 并全局替換為 v-model。其實(shí) Vue2 和 Vue3 都不加 :value，不知為何轉(zhuǎn)換時(shí)加上了…

   

2. 插槽報(bào)錯(cuò)Duplicate slot names found 發(fā)現(xiàn)重復(fù)的插槽名稱 。僅兩個(gè) slot 在一塊報(bào)錯(cuò)…

3. HTML 元素上的方法，例如 @click= 中有多個(gè)表達(dá)式僅換行沒(méi)分號(hào) ; ，這是語(yǔ)法錯(cuò)誤。建議多個(gè)表達(dá)式就寫(xiě)在方法里

Webpack 轉(zhuǎn) Vite 適配

動(dòng)態(tài)加載文件 Webpack 用 require.context, Vite 用 import.meta.glob

• src\params.js
• src\store\index.js

Webpack 用 require.context

const modulesList = require.context("./src/components", true, /\.vue$/);
const modules = modulesList.keys().reduce((obj, modulePath) => {// 文件名const moduleName = modulePath.replace(/^\.\/(.*)\/(.*)\.\w+$/, "$2");// 模塊對(duì)象let moduleObj = modulesList(modulePath);// 放入模塊obj[moduleName] = moduleObj.default;return obj;}, {});

Vite 用 import.meta.glob

// 注意加在 `eager: true` 是同步處理
const modulesList = import.meta.glob('./src/components/**/*.vue', { eager: true });
const modules = Object.keys(modulesList).reduce((obj, path) => {// 文件名const moduleName = path.replace(/(.*\/)*([^.]+).*/ig, "$2");// 放入模塊obj[moduleName] = modulesList[path].default;return obj;
}, {})

const modulesFiles = import.meta.glob('./funcs/**/*.vue')let modules = {};
for (const path in modulesFiles) {modulesFiles[path]().then((mod) => {// 文件名const moduleName = path.replace(/(.*\/)*([^.]+).*/ig, "$2");// 放入模塊modules[moduleName] = mod.default;})
}

Element Plus 適配

1. el-button 警告 [props] [API] type.text is about to be deprecated in version 3.0.0, please use link instead.

解決： 官網(wǎng)中 el-button type=“text” 用于鏈接按鈕已在 v3.0.0 廢除

// 原
<el-button type="text">文字按鈕</el-button>// 改為
<el-button type="primary" link>文字按鈕</el-button>

---

2. el-input 警告 Invalid prop: validation failed. Expected one of ["", "default", "small", "large"], got value "mini".

解決： 屬性 size 在 ElementUI 和 ElementPlus 之間有差異

• Element UI 用 medium / small / mini
• Element Plus 用 large / default / small

---

3. el-tabs 方法 tab-click 返回值 ElementUI 和 ElementPlus 不一樣

差異： ElementUI el-tabs 和 ElementPlus el-tabs

---

4. el-input ElementUI 和 ElementPlus 有點(diǎn)差異，ElementPlus 多嵌套了一層 el-input__wrapper

解決： 改造 src\assets\scss\elements\input.scss，設(shè)置 padding:0 !important

---

5. Element Icon 圖標(biāo) 警告 voided by marking the component with markRawor usingshallowRefinstead ofref.

解決： 以轉(zhuǎn)換后一張圖系統(tǒng)文件 src\components\mode-refreshing\head.vue 為例。代碼第 10 行 ElIconSetting，放在 data() 中，做了深度響度，會(huì)有必要的開(kāi)銷。

// 修改前
import {Setting as ElIconSetting,DataAnalysis as ElIconDataAnalysis,SwitchButton as ElIconSwitchButton,
} from '@element-plus/icons-vue'
export default {data() {return {ElIconSetting，ElIconDataAnalysis，ElIconSwitchButton}},
}

提示加上 markRaw 不被代理 或 shallowRef 淺層響應(yīng)。如代碼 2,11-13 行

// 修改后
import { shallowRef } from 'vue'
import {Setting as ElIconSetting,DataAnalysis as ElIconDataAnalysis,SwitchButton as ElIconSwitchButton,
} from '@element-plus/icons-vue'
export default {data() {return {ElIconSetting: shallowRef(ElIconSetting),ElIconDataAnalysis: shallowRef(ElIconDataAnalysis),ElIconSwitchButton: shallowRef(ElIconSwitchButton),}},
}