安裝工具
可以全局安裝或者安裝在當(dāng)前項目下，推薦安裝在項目里，方便別人 clone 項目時能直接安裝依賴并啟動下愈，這里以全局安裝做演示。
npm i element-theme -g
安裝默認主題蕾久，可以從 npm 安裝或者從 GitHub 拉取最新代碼势似。(默認下載的是最新的主題，下載的時候可以指定版本)
# 從 npm
npm i element-theme-default -D
# 從 GitHub
npm i https://github.com/ElementUI/theme-default -D
初始化變量文件
主題生成工具安裝成功后，如果全局安裝可以在命令行里通過 et 調(diào)用工具履因，如果安裝在當(dāng)前目錄下障簿，需要通過 node_modules/.bin/et 訪問到命令。執(zhí)行 -i 初始化變量文件栅迄。默認輸出到 element-variables.css站故，當(dāng)然你可以傳參數(shù)指定文件輸出目錄。
et -i [可以自定義變量文件]
> ? Generator variables file
如果使用默認配置毅舆，執(zhí)行后當(dāng)前目錄會有一個 element-variables.css 文件西篓。內(nèi)部包含了主題所用到的所有變量，它們使用 CSS4 的風(fēng)格定義憋活。大致結(jié)構(gòu)如下：
:root {
/* Colors
-------------------------- */
--color-primary: #20a0ff;
--color-success: #13ce66;
--color-warning: #f7ba2a;
--color-danger: #ff4949;
--color-info: #50BFFF;
--color-blue: #2e90fe;
--color-blue-light: #5da9ff;
--color-blue-lighter: rgba(var(--color-blue), 0.12);
--color-white: #fff;
--color-black: #000;
--color-grey: #C0CCDA;
修改變量
直接編輯 element-variables.css 文件岂津，例如修改主題色為紅色。
--color-primary: red;
編譯主題
保存文件后悦即，到命令行里執(zhí)行 et 編譯主題吮成，如果你想啟用 watch 模式，實時編譯主題辜梳，增加 -w 參數(shù)粱甫；如果你在初始化時指定了自定義變量文件，則需要增加 -c 參數(shù)作瞄，并帶上你的變量文件名
et
> ? build theme font
> ? build element theme
引入自定義主題
默認情況下編譯的主題目錄是放在 ./theme 下茶宵，你可以通過 -o 參數(shù)指定打包目錄。像引入默認主題一樣粉洼，在代碼里直接引用 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"
}
]]]
}
