《Vue3 基础知识》 使用 GoGoCod 升级到Vue3+ElementPlus 适配处理

此篇为 《Vue2+ElementUI 自动转 Vue3+ElementPlus（GoGoCode）》 的扩展！

Vue3 适配

Vue3 不兼容适配

Vue 3 迁移指南 在此，本章只讲述项目或组件库中遇到的问题；

1. Vue3 移除 $on，$off 和 $once 实例方法，事件总线Bus的差异；

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

   /* Vue2 写法一 */
   .a >>>.b
   /* Vue2 写法二 */
   .a /deep/ .b
   
   /* Vue3 写法*/
   .a :deep(.b) 
   

3. Vue props 多个类型，不要用 | ，用数组 []。否则报错 expected "indent", got "eos"

   expandLevel: {
       // type: Number | String,// vue2 可以，vue3 报错
       type: [Number, String], // vue2/vue3 正确
       default: 1,
   }
   

GoGoCode 自动升级适配

1. v-model:value 报错，全局搜 v-model:value 并全局替换为 v-model。其实 Vue2 和 Vue3 都不加 :value，不知为何转换时加上了…

   

2. 插槽报错Duplicate slot names found 发现重复的插槽名称 。仅两个 slot 在一块报错…

3. HTML 元素上的方法，例如 @click= 中有多个表达式仅换行没分号 ; ，这是语法错误。建议多个表达式就写在方法里

Webpack 转 Vite 适配

动态加载文件 Webpack 用 require.context, Vite 用 import.meta.glob

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

Webpack 用 require.context

const