【Vue】vue+element-ui的主題顏色切換

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