一、引入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…文章来源：https://www.toymoban.com/news/detail-515799.html
四、安装gulp相关依赖工具
cnpm install --global gulp-cli
cnpm i gulp gulp-clean-css gulp-css-wrap gulp merge-stream -D
五、执行gulp
在根目录执行以下命令：文章来源地址https://www.toymoban.com/news/detail-515799.html
gulp themetask
六、执行切换效果
changeTheme(value) {
sessionStorage.setItem('theme', value)
document.getElementsByTagName("body")[0].className = value;//改成相应类名
},
到了这里，关于vue使用element-ui 实现多套自定义主题快速切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
