Element UI 是一款基於 Vue.js 的前端 UI 組件庫，它供給了豐富的組件跟便捷的 API，極大年夜地晉升了 Vue.js 項目標開辟效力跟界面品質。但是，隨着項目須要的多樣化，原生的 Element UI 主題可能無法完全滿意特性化定製的須要。本文將具體介紹如何在 Vue.js 與 Element UI 中輕鬆打造特性化自定義主題。
1. 引入 Element UI
起首，在 Vue.js 項目中引入 Element UI。可能經由過程 npm 或 yarn 安裝 Element UI：
npm install element-ui
# 或許
yarn add element-ui
然後，在 main.js 中全局引入 Element UI 跟默許款式：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
現在，項目中可能利用 Element UI 的全部組件。
2. 定製化主題
Element UI 支撐自定義主題，使得我們可能根據項目須要調劑組件款式。以下介紹多少種定製化主題的方法：
方法一：在項目中改變 SCSS 變量
假如你的項目利用 SCSS，可能創建自定義的 SCSS 文件，寫入以下內容：
/* 改變主題色變量 */
--color-primary: teal;
/* 改變 icon 字體道路變量，必須 */
--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
之後，在項目標進口文件中，直接引入以下款式文件即可（無需引入 Element 編譯好的 CSS 文件）：
import Vue from 'vue';
import Element from 'element-ui';
import './[自定義的scss文件名].scss';
Vue.use(Element);
須要注意的是，覆蓋字體道路變量是必須的，將其賦值為 Element 中 icon 圖標地點的絕對道路即可。
方法二：命令行主題東西
假如你的項目倒黴用 SCSS，可能利用命令行主題東西停止深檔次的主題定製：
// 安裝主題東西
npm i element-theme -g
// 安裝白堊主題，可能從 npm 安裝或許從 GitHub 拉取最新代碼。
# 從 npm
npm i element-theme-chalk -D
# 從 GitHub
npm i https://github.com/
方法三：在線主題編輯器
Element UI 供給了在線主題編輯器，可能便利地抉擇色彩、邊框、字體等參數，生成並下載自定義款式文件。
3. 預設主題
Element UI 平日會供給一些預設的主題，用戶可能直接抉擇利用，無需重新開端定製。這些預設主題平日包含了差別配色的 SCSS 文件，可能便利地引入到項目中。
4. 按需引入
為了優化機能，Element UI 容許開辟者按需引入組件，避免加載未利用的款式。這可能經由過程設置 babel-plugin-component 插件實現。
npm install babel-plugin-component -D
然後，在 .babelrc 中設置：
{
"presets": [["es2015", "modules": false]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接上去，假如你只盼望引入部分組件，比方 Button 跟 Select，那麼須要在 main.js 中寫入以下內容：
import Button, Select from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
5. 總結
經由過程以上方法，可能輕鬆地在 Vue.js 與 Element UI 中打造特性化自定義主題。根據項目須要抉擇合適的方法，讓你的項目更具特點。