第七节 按需导入elementPlus

系列文章目录

---

目录

系列文章目录

前言

操作方法

总结

---

前言

基础工作准备完毕，从这节开始正式进入项目。

官网地址  一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

---

操作方法

1.  安装element-plus

   npm install element-plus --save

2. 查看官方文档->快速开始  进行按需导入。推荐 自动导入。
   安装unplugin-vue-components 和 unplugin-auto-import这两款插件

   npm install -D unplugin-vue-components unplugin-auto-import

3. 根目录下新建 vue.config.js文件，配置webpack

   const AutoImport = require('unplugin-auto-import/webpack')
   const Components = require('unplugin-vue-components/webpack')
   const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
   
   module.exports = {
     // ...
     plugins: [
       AutoImport({
         resolvers: [ElementPlusResolver()],
       }),
       Components({
         resolvers: [ElementPlusResolver()],
       }),
     ],
   }

4. 运行项目 报错有两种情况 
   ① 报错：Cannot find module 'node:module'This is probably not a problem with npm.-CSDN博客
   ② 报错：Invalid options in vue.config.js: "plugins" is not allowed
   Invalid options in vue.config.js: “plugins“ is not allowed-CSDN博客
5. 测试成果 app.vue 加入button按钮

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

6. 运行项目
   

---

总结

按需导入elementPlus并测试。

其中有两个注意点：

一个是config.js的配置内容；

一个是安装的版本号。

---

每天记录一点，助力成长！

欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

如果你觉得本文对你有帮助，欢迎点赞收藏转载，烦请注明出处，谢谢！ 

系列文章会不段更新，您的点赞、收藏、关注是我继续的动力~