一、引入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 () {//主题1var 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文件存放的目录//主题2var 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'));//主题3var 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;//改成相应类名},