vue 结合element ui 实现主题切换

方案一: 

1. 在element ui官网找到在线主题编辑

 

2. https://element.eleme.cn/#/zh-CN/theme/preview

 

 

 

3. 调好颜色点击下载,获取颜色文件

4. 解压后将得到文件,在项目根目录创建文件夹them,将下面文件赋值到them

 

 

 4.   安装工具

　　npm install gulp

　　npm install gulp-clean-css

　　npm install gulp-css-wrap

 5. 在项目根目录下创建一个名为 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('./them3/theme/index.css'))

    /* 找需要添加命名空间的css文件，支持正则表达式 */

        .pipe(cssWrap({

            selector: '.custom-3' /* 添加的命名空间 */

        }))

        .pipe(cleanCSS())

        .pipe(gulp.dest('src/assets/css/theme/3a')) /* 导出的文件存放的目录 */

})

　　6. gulp css-wrap

　　7.  将生成的文件 按照自己的方式进行配置,fonts 文件是必须的文件

 

 8. App.vue 引入全部css文件

 

 9. 切换主题文件

<template>
  <div class="hello">
    <el-radio-group v-model="themeValue" @change='changeTheme'>
      <el-radio :label="'custom-1'">绿色（默认）</el-radio>
      <el-radio :label="'custom-2'">蓝色</el-radio>
      <el-radio :label="'custom-3'">蓝色</el-radio>
  
    </el-radio-group>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>
<script>
import { toggleClass } from './index'
export default {
  data () {
    return {
      themeValue: 'custom-1'
    }
  },
  created(){
    // 设置默认主题
    localStorage.setItem('theme','custom-1')
  },
  mounted(){
    // 设置默认主题
    toggleClass(document.body, localStorage.getItem('theme'));
  },
  methods: {
    //换肤功能。
    changeTheme(val){
      toggleClass(document.body, val);
      localStorage.setItem('theme',val)
    }
  }
}
</script>
<style scoped></style>