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.在main.js的入口文件中引入

    import '../theme/index.css'

9.使用gulp-css-wrap神器

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

10.在项目根目录下创建一个名为 gulpfile.js 的文件

    // 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输出

gulp css-wrap

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

此时文件夹下没有fonts文件夹，把生成主题时生成的fonts复制到此处即可
13.建立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;

在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步重新开始生成主题来完成。