一、前言

在使用 Vue 框架最常用的 UI 便是 Element，這裡就做一些全域性設定、升級等做一些介紹。

二、全域性設定

在引入 Element 時，可以傳入一個全域性配置物件。該物件目前支援size與zIndex欄位。size用於改變元件的預設尺寸，zIndex設定彈框的初始 z-index（預設值：2000）。按照引入 Element 的方式，具體操作如下：

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element：

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

按照以上設定，專案中所有擁有size屬性的元件的預設尺寸均為 'small'，彈框的初始 z-index 為 3000。

以上內容引自官網

三、升級 Element 和主題

在更新 Element 版本的時候，是需要一起更新主題的。

首先：

npm update element-ui -S

更新到最新版本。

接下來就是更新主題，我這裡選的是用“命令列主題工具”來生成主題樣式程式碼。

首先安裝「主題生成工具」，可以全域性安裝或者安裝在當前專案下，推薦安裝在專案裡，方便別人 clone 專案時能直接安裝依賴並啟動，這裡以全域性安裝做演示。

（下面我安裝的全域性的）

npm i element-theme -g

安裝白堊主題，可以從 npm 安裝或者從 GitHub 拉取最新程式碼。

# 從 npm
npm i element-theme-chalk -D

# 從 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

初始化變數檔案

主題生成工具安裝成功後，如果全域性安裝可以在命令列裡通過et呼叫工具，如果安裝在當前目錄下，需要通過node_modules/.bin/et訪問到命令。執行-i初始化變數檔案。預設輸出到element-variables.scss，當然你可以傳引數指定檔案輸出目錄。

et -i [可以自定義變數檔案]

注意：

這一步可能會報錯：primordials is not defined，這個錯誤的問題是 Node 的版本過高，把 Node 降到 11.15.0 以下就可以。

因為這一步只是編譯，和程式碼執行環境不衝突，建議使用 NVM 切換 Node 進行編譯主題，執行程式碼時再切換高版本即可。

修改變數

直接編輯element-variables.scss檔案，例如修改主題色為紅色。

$--color-primary: red;

編譯主題

儲存檔案後，到命令列裡執行et編譯主題，如果你想啟用watch模式，實時編譯主題，增加-w引數；如果你在初始化時指定了自定義變數檔案，則需要增加-c引數，並帶上你的變數檔名。預設情況下編譯的主題目錄是放在./theme下，你可以通過-o引數指定打包目錄。

et

> ✔ build theme font
> ✔ build element theme

引入自定義主題

在 main.js 中引入生成的主題的theme/index.css檔案即可。

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

搭配外掛按需引入元件主題

如果是搭配babel-plugin-component一起使用，只需要修改.babelrc的配置，指定styleLibraryName路徑為自定義主題相對於.babelrc的路徑，注意要加~。

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "~theme"
      }
    ]
  ]
}