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

本文介绍: 使用 GoGoCod 升级到Vue3+ElementPlus 适配处理

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

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

Webpack 用 require.context

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;
   }, {});

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;
    })
}

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

// 原
<el-button type="text">文字按钮</el-button>

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

解决： 属性 size 在 ElementUI 和 ElementPlus 之间有差异

解决： 改造 srcassetsscsselementsinput.scss，设置 padding:0 !important

解决： 以转换后一张图系统文件 srccomponentsmode-refreshinghead.vue 为例。代码第 10 行 ElIconSetting，放在 data() 中，做了深度响度，会有必要的开销。

// 修改前
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 行

// 修改后
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),
    }
  },
}

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。