【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