element團(tuán)隊(duì)為新版的 vue-cli4 準(zhǔn)備了相應(yīng)的 Element Plus 插件

---

安裝依賴

npm install element-plus --save

---

main.js全局引入，樣式文件需要單獨(dú)引入

import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue';const app = createApp(App) app.use(ElementPlus) app.mount('#app')

---

按需引入需要借助babel-plugin-import插件，詳情見官網(wǎng)

---

自定義樣式變量：

如果你的項(xiàng)目也使用了 SCSS，那么可以直接在項(xiàng)目中改變 Element Plus 的樣式變量，否則參考官網(wǎng)的其他方法。
在src中創(chuàng)建element-variables.scss

/* 所有變量在這里改后生效 */ /* 改變主題色變量 */ $--color-primary: teal;/* 改變 icon 字體路徑變量，必需 */ $--font-path: '~element-plus/lib/theme-chalk/fonts';@import "~element-plus/packages/theme-chalk/src/index";

main.js中引入

import Vue from 'vue' import ElementPlus from 'element-plus' import './element-variables.scss' import App from './App.vue';const app = createApp(App) app.use(ElementPlus)

總結(jié)

以上是生活随笔為你收集整理的vue3.0、cli4项目引入element plus的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。