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-import 插件可以輔助完成這個工作，首先安裝 babel-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 帶給你的高效開發體驗