系列文章目录
目录
前言
基础工作准备完毕,从这节开始正式进入项目。
官网地址 一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
操作方法
- 安装element-plus
npm install element-plus --save
- 查看官方文档->快速开始 进行按需导入。推荐 自动导入。
安装unplugin-vue-components
和unplugin-auto-import
这两款插件npm install -D unplugin-vue-components unplugin-auto-import
- 根目录下新建 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()], }), ], }
- 运行项目 报错有两种情况
① 报错: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博客 - 测试成果 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>
- 运行项目
总结
按需导入elementPlus并测试。
其中有两个注意点:
一个是config.js的配置内容;
一个是安装的版本号。
每天记录一点,助力成长!
欢迎大家来浏览我的博客,如发现我有写错的地方,欢迎交流指正。
如果你觉得本文对你有帮助,欢迎点赞收藏转载,烦请注明出处,谢谢!
系列文章会不段更新,您的点赞、收藏、关注是我继续的动力~