【Vue】vue+element-ui的主题颜色切换

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

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

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

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

et -i element-variables.scss

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;

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‘;

// 换肤加class函数
export function toggleClass(element, className) {
    if (!element || !className) {
      return;
    }
    element.className = className;
}