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

参考了 https://mp.csdn.net/mdeditor# 的作法，很感谢
1.安装vue-clicss

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

2.安装element-ui及sassvue

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

在build文件夹下的webpack.base.conf.js的rules里面添加配置node

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

3.安装elementui的自定义主题工具webpack

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

4.初始化变量文件web

et -i element-variables.scss

5.这时根目录下会产生element-variables.scss

6.编译主题
更改primary的值， 命令行输入et
7.编译完成以后在主目录下生成theme的文件夹（此文件下的fonts之后有用）

8.在main.js的入口文件中引入正则表达式

import '../theme/index.css'

9.使用gulp-css-wrap神器vuex

npm install  gulp
npm install gulp-clean-css
npm install gulp-css-wrap

10.在项目根目录下建立一个名为 gulpfile.js 的文件vue-cli

// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
    return gulp.src(path.resolve('./theme/index.css'))
    /* 找须要添加命名空间的css文件，支持正则表达式 */
        .pipe(cssWrap({
            selector: '.custom-02abfd' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目录 */
})

custom-02abfd中的02abfd即为刚才生成自定义主题时的颜色
11.执行gulp输出npm

gulp css-wrap

12.生成theme文件夹下的主题名称

此时文件夹下没有fonts文件夹，把生成主题时生成的fonts复制到此处便可
13.创建store文件存储主题状态element-ui

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;

在main.js入口文件中引用

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

14.在颜色切换页面

作相应的处理
util->index.js

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

赶忙用左侧导航栏来试一下吧

<template>
  <div>
    <el-row class="tac">
      <el-col :span="8">
        <h5>带 icon</h5>
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
          <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  };
</script>

想作多套主题能够从第5步从新开始生成主题来完成。