Element 更新以及全局設置屬性

一、前言

在使用 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 （這里是當前項目，和 et 使用不一樣）
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"
      }
    ]
  ]
}