vue使用element-ui 实现多套自定义主题快速切换

一、引入element-ui主题文件

在element-ui官网编辑好自己需要的主题样式

下载到本地项目文件

vue项目目录可以参考我的本地目录位置：

二、main.js 按需引入所有主题样式

import '@/assets/theme/blue/index.css'
import '@/assets/theme/white/index.css'
import '@/assets/theme/black/index.css'

三、在项目根目录创建文件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 () {
  //主题1
  var blue = gulp.src(path.resolve('./src/assets/theme/blue/index.css')) // 需要添加类名的css文件，支持正则表达式
    .pipe(cssWrap({ selector: '.theme-blue' })) // 添加的类名
    .pipe(cleanCSS())
    .pipe(gulp.dest('./src/assets/theme/blue'));// 生成的css文件存放的目录
 
  //主题2
  var white = gulp.src(path.resolve('./src/assets/theme/white/index.css'))
    .pipe(cssWrap({ selector: '.theme-white' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('./src/assets/theme/white'));

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

配置所需主题样式文件和className,例如上面代码：theme-black、theme-blue…

四、安装gulp相关依赖工具

cnpm install --global gulp-cli

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

五、执行gulp

在根目录执行以下命令：

gulp themetask

六、执行切换效果

changeTheme(value) {
   sessionStorage.setItem('theme', value)
   document.getElementsByTagName("body")[0].className = value;//改成相应类名
},