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步從新開始生成主題來完成。