vue 自定义系统流程【2】elementUi 及其他插件经过【1】的配置之后，我们现在还要做的 elementUi

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

经过【1】的配置之后，我们现在还要做的
elementUi 及其他插件的配置
路由及权限配置

原本计划先完成路由的，想了想，还是得把UI 放在前面来做。所以先完成 elementUi的部分，路由放到第三步进行

零文档及说明

官网 element-plus.org/zh-CN/#/zh-… [Element PLUS 支持VUE 3.0]
旧版 element.eleme.cn/#/zh-CN/com… [支持VUE 2.0]
【2】号部分，后面应该还会有关于 element的说明。暂时先挖坑吧

一、安装

element-ui 也相应的升级成了 element-plus ，所以原本 vue-element-admin 【以下简称v-e-a】有挺多组件component以及部分样式是需要修改的

npm 安装

//d:/node/z-test-vue/hello-world/
npm i element-plus --save

全局加载【./src/main.js】

在加载 App 前加载

// 原本的
import Element from 'element-ui'
import 'element-plus/dist/index.css'
。。。
//使用
app.component('svg-icon', SvgIcon).use(Element).use(router).mount('#app')

要改为

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.component('svg-icon', SvgIcon).use(ElementPlus).use(router).mount('#app')

测试 src/vies/layout/index.vue

 <el-row>
      <el-button disabled>Default</el-button>
      <el-button type="primary" disabled>Primary</el-button>
      <el-button type="success" disabled>Success</el-button>
      <el-button type="info" disabled>Info</el-button>
      <el-button type="warning" disabled>Warning</el-button>
      <el-button type="danger" disabled>Danger</el-button>
    </el-row>

    <el-row>
      <el-button plain disabled>Plain</el-button>
      <el-button type="primary" plain disabled>Primary</el-button>
      <el-button type="success" plain disabled>Success</el-button>
      <el-button type="info" plain disabled>Info</el-button>
      <el-button type="warning" plain disabled>Warning</el-button>
      <el-button type="danger" plain disabled>Danger</el-button>
    </el-row>

如果出现图标样式，说明成功了，到此element 加载结束。其他用法以后补全吧~

所有js 中单独引用的 Message,MessageBox 要改为 ElMessage,ElMessageBox

见 element-plus.gitee.io/zh-CN/compo…

问题

Can't import the named export 'CaretRight' from non EcmaScript module (only default export is available)

因为官方文档提供的npm install element-plus --save命令引入安装时会引入最新的版本（在安装时没有指定版本）
这个版本在使用webpack版本时大概率会出现这个问题。
解决： - webpack.config.js

configureWebpack:{
    module: {
        rules: [
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            },
        ]
    }
}
————————————————
版权声明：本文为CSDN博主「李江辰」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43518405/article/details/120299406

字体加载器 Can't resolve './fonts/element-icons.ttf'

发现现在版本 1.1.0-beta.21 ，字体文件竟然放在 fonts/fonts/element-icons.ttf,也就是2个 fonts 文件夹
进入 D:\node\z-test-vue\hello-world\node_modules\element-plus\dist\fonts/fonts/
把两个文件拷贝到上层fonts 中，解决。。。已提issue，下版本应该会解决
上午提的 issue ，下午解决了，所以这个问题可以结束了

vue 自定义系统流程【2】elementUi 及其他插件

零 文档及说明

一、安装

问题

零文档及说明