前言
Element Plus 是为适配 Vue3 而对 Element UI 进行重构后产生的前端组件库，包含丰富的基础组件
下面先贴出 官方文档，里面的介绍已经十分全面和详细，大家遇到的很多问题都可以在上面找到答案
假设现在我们已经用 vue-cli 4 工具创建了一个 Vue3 项目，然后怎么在项目中引入 Element Plus 呢？
注意，这里必须是用 vue-cli 4 创建的 Vue3 项目，否则后面会报错，首先介绍一下默认生成的目录结构
+ demo + node_modules（存放第三方模块） + public（存放静态文件） - favicon.ico（图标） - index.html （页面模板） + src（我们自己写的文件一般放在这个文件夹下） + assets（存放资源文件） + components（存放公共组件） + router.js（路由管理：Router） + store.js （状态管理：Vuex） + views（存放视图组件） - App.vue（页面入口文件） - main.js（程序入口文件） - package.json（项目配置文件） - package-lock.json（项目配置文件） - babel.config.js（babel 配置文件） - README.md（项目说明文档） - ...（其它配置文件）
正文
1、安装 Element Plus
npm 是 Node 的包管理工具，我们可以通过 npm 安装 Element Plus
加上 --save 选项，可以同时将配置写入 package.json 的 dependencies 字段（生产环境依赖）
npm install --save element-plus
2、引入 Element Plus
在 Vue 中引入 Element Plus 有两种方式，分别是全部引入和局部引入，下面将会逐一介绍
（1）全部引入
在 main.js 中引入并注册全部组件，即可在其它页面中直接使用全部组件
// main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // 新增代码：引入全部组件及样式 import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(store) app.use(router) // 新增代码：注册全部组件 app.use(ElementPlus) app.mount('#app')
采用这种引入方式，不管是否使用到的组件，都会全部加载进来，显然不是一个好的办法
（2）局部引入
在 main.js 中引入并注册特定组件，在其它页面中只可使用特定组件
// main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // 新增代码：引入特定组件及样式 import { ElButton } from 'element-plus' import 'element-plus/lib/theme-chalk/el-button.css' const app = createApp(App) app.use(store) app.use(router) // 新增代码：注册特定组件 app.component(ElButton.name, ElButton) app.mount('#app')
采用这种引入方式，可以保证只引入需要的组件（按需引入）
但每引入一个组件，都要手动将其对应的样式文件同时引入，未免过于麻烦
babel-plugin-importbabel-plugin-import 插件
加上 --save-dev 选项，同时将配置写入 package.json 的 devDependencies 字段（开发环境依赖）
npm install --save-dev babel-plugin-import
然后在 babel.config.js 配置插件
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], // 新增代码 plugins: [ [ "import", { libraryName: 'element-plus', customStyleName: (name) => { return `element-plus/lib/theme-chalk/${name}.css`; } } ] ] }
接着在 main.js 按需引入组件
// main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // 新增代码：引入特定组件 // 此时会自动引入对应的样式文件，无需再手动逐一引入 import { ElButton } from 'element-plus' const app = createApp(App) app.use(store) app.use(router) // 新增代码：注册特定组件 app.component(ElButton.name, ElButton) app.mount('#app')
最后记得使用 npm run serve 重启应用，即可在其它页面中使用特定组件
3、使用 Element Plus
在安装和引入 Element Plus 后，我们就可以在页面使用 Element Plus 中的组件啦
<template> <div> <el-button type="primary" @click="handleClick">Primary</el-button> </div> </template> <script> export default { methods: { handleClick: function (e) { console.log('click', e) } } } </script>
这时，如果你能看到一个蓝色的按钮出现在页面上，就说明已经配置成功
接下来就可以尽情享受 Element Plus 带给你的高效开发体验
