vue+element-ui 主题颜色切换

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

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

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

• 4.安装elementui的自定义主题工具

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

• 5.初始化变量文件

  et -i element-variables.scss

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

• 7.编译主题 更改primary的值， 命令行输入et

• 8.编译完成之后在主目录下生成theme的文件夹（此文件下的fonts以后有用

• 9.在main.js的入口文件中引入

  import '../theme/index.css'

• 10.使用gulp-css-wrap神器

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

• 11.在项目根目录下创建一个名为 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即为刚才生成自定义主题时的颜色

• 12.执行gulp输出

  gulp css-wrap

• 13 生成theme文件夹下的主题名称

  此时文件夹下没有fonts文件夹，把生成主题时生成的fonts复制到此处即可

• 14 建立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';

• 15 在颜色切换页面

  做相应的处理
  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>