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

此篇为 《Vue2+ElementUI 自动转 Vue3+ElementPlus(GoGoCode)》 的扩展!

Vue3 适配

Vue3 不兼容适配

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

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

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

    css:line-numbers 复制代码
    /* Vue2 写法一 */
    .a >>>.b
    /* Vue2 写法二 */
    .a /deep/ .b
    
    /* Vue3 写法*/
    .a :deep(.b) 
  3. Vue props 多个类型,不要用 | ,用数组 []。否则报错 expected "indent", got "eos"

    js:line-numbers 复制代码
    expandLevel: {
        // type: Number | String,// vue2 可以,vue3 报错
        type: [Number, String], // vue2/vue3 正确
        default: 1,
    }

GoGoCode 自动升级适配

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

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

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

Webpack 转 Vite 适配

动态加载文件 Webpackrequire.context, Viteimport.meta.glob

  • src\params.js
  • src\store\index.js
  • src\components\onemap\func.js 注意这里是异步加载,否则初始化最先加载,找不到 app 对象

Webpackrequire.context

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

Viteimport.meta.glob

js:line-numbers 复制代码
// 注意加在 `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;
}, {})
js 复制代码
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.

解决: 官网中 el-button type="text" 用于链接按钮已在 v3.0.0 废除

html 复制代码
// 原
<el-button type="text">文字按钮</el-button>

// 改为
<el-button type="primary" link>文字按钮</el-button>

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

解决: 属性 sizeElementUIElementPlus 之间有差异


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

差异: ElementUI el-tabsElementPlus el-tabs


  1. el-input ElementUI 和 ElementPlus 有点差异,ElementPlus 多嵌套了一层 el-input__wrapper

解决: 改造 src\assets\scss\elements\input.scss,设置 padding:0 !important


  1. Element Icon 图标 警告 voided by marking the component with markRawor usingshallowRefinstead ofref.

解决: 以转换后一张图系统文件 src\components\onemap\mode-refreshing\head.vue 为例。代码第 10ElIconSetting,放在 data() 中,做了深度响度,会有必要的开销。

js:line-numbers 复制代码
// 修改前
import {
  Setting as ElIconSetting,
  DataAnalysis as ElIconDataAnalysis,
  SwitchButton as ElIconSwitchButton,
} from '@element-plus/icons-vue'
export default {
  data() {
    return {
      ElIconSetting,
      ElIconDataAnalysis,
      ElIconSwitchButton
    }
  },
}

提示加上 markRaw 不被代理shallowRef 浅层响应 。如代码 2,11-13

js:line-numbers 复制代码
// 修改后
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),
    }
  },
}
相关推荐
江城开朗的豌豆24 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆36 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
江城开朗的豌豆42 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆42 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆43 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆44 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山1 小时前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
daols888 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
行云&流水10 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js