vue + Element主题换肤

1. 生成Element自定义主题

参考官网自定义主题章节：https://element.eleme.cn/#/zh-CN/component/custom-theme

得到生成的主题：

2. 如果是只要应用一种主题，将文件夹放入项目中，在main.js中引入该样式文件即可。

（可以将index.css重命名，但必须保持样式文件与fonts文件夹的相对位置）

3. 如果想要实现多种主题切换，思路是将生成的每种主题css文件都包裹一个类名，js动态改变body的类名即可。

效果：

这里会使用到gulp工具

3.1 全局安装 gulp 命令行工具

npm install --global gulp-cli

（这步是为了能够在终端中使用gulp命令，如果没有安装这个，会报错gulp命令不存在、找不到）

3.2 在项目开发环境下安装依赖

npm i gulp gulp-clean-css gulp-css-wrap gulp merge-stream -D

注：这里其实安装了四个包：gulp、gulp-clean-css、 gulp-css-wrap、merge-stream。

merge-stream：在一个任务中使用多个文件来源（这里也就是对应的多个主题的css文件） 如果只有单文件则可以不安装

3.3 在项目根目录下新建gulpfile.js文件，写入代码：

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
var merge = require('merge-stream');

// 名为themeTask的任务
gulp.task('themetask', function () {
  //主题一
  var orange = gulp.src(path.resolve('./src/assets/css/theme/orange/index.css')) // 需要添加类名的css文件，支持正则表达式
    .pipe(cssWrap({ selector: '.theme-orange' })) // 添加的类名
    .pipe(cleanCSS())
    .pipe(gulp.dest('./src/assets/css/theme/orange'));// 生成的css文件存放的目录

  //主题一
  var pink = gulp.src(path.resolve('./src/assets/css/theme/pink/index.css'))
    .pipe(cssWrap({ selector: '.theme-pink' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('./src/assets/css/theme/pink'));
    
  return merge(orange, pink);
})

3.4 在命令行运行gulp任务：

gulp themetask

注：这里的themetask那么就是上面定义的task后面的名字，如果名为'default'则可以省去，直接使用命令gulp

接着就会在你gulpfile.js代码中指定的存放目录生成一个：与原css文件同名、加了指定类名的css文件，如：

注意：如果你指定存放目录与原css文件目录相同，生成的文件就会将原文件直接替换掉

3.5 把生成的文件按照步骤2引入到main.js中即可，同样要注意css文件与相应的fonts文件夹相对位置保持一致

3.6 剩下的就是在js中写入你的交互逻辑，改变body的类名即可：

document.getElementsByTagName("body")[0].className = 'theme-orange';//改成相应类名