1.安裝vue-cli

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev

2.安裝element-ui及sass

  npm i element-ui -S
  npm install --save-dev sass-loader
  npm install --save-dev node-sass

在build資料夾下的webpack.base.conf.js的rules裡面新增配置

 {
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}
 

3.安裝elementui的自定義主題工具

npm i element-theme -g
npm i element-theme-chalk -D

4.初始化變數檔案

et -i element-variables.scss

5.這時根目錄下會產生element-variables.scss

6.編譯主題

更改primary的值， 命令列輸入et

7.編譯完成之後在主目錄下生成theme的資料夾（此檔案下的fonts以後有用）

8.重複5,6的操作生成多個主題包後，將所有的主題包拷貝到theme下（注意每個主題下要有fonts包）

9.建立store檔案儲存主題狀態

import Vue from 'vue'
import Vuex from 
 
'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        themecolor:'20a0ff'//預設為20a0ff
    },
    mutations:{
        //更新主題顏色
        setThemeColor(state,curcolor){
            this.state.themecolor = curcolor;
        }
    }
});
export default store;

10.在main.js入口檔案中引用

import store from './vuex/store.js';
import 
 
'./assets/css/theme/a25fbc/index.css';
import './assets/css/theme/02abfd/index.css';
import './assets/css/theme/1b1e24/index.css';

11.在顏色切換頁面

12.util/index.js

// 換膚加class函式
export function toggleClass(element, className) {
    if (!element || !className) {
      return;
    }
    element.className = className;
}

參考：https://blog.csdn.net/youlinaixu/article/details/83447527