Vue如何实现主题切换功能

最新推荐文章于 2024-06-01 13:49:38 发布

不cong明的亚子

最新推荐文章于 2024-06-01 13:49:38 发布

阅读量2k

点赞数 3

分类专栏：前端 vue+element ui 主题切换文章标签： vue.js

本文链接：https://blog.csdn.net/qq_36579455/article/details/108773447

版权

这篇博客详细介绍了如何在Vue项目中结合Element UI实现主题切换功能，包括使用gulp和vuex的方法，通过安装必要插件、配置文件、创建store模块以及组件，实现了颜色主题的动态切换。

摘要由CSDN通过智能技术生成

Vue + Element UI的主题切换实现

准备工作

插件的安装

npm i element-theme -g
npm i element-theme-chalk -D
打开官方文档， element-UI自定义主题

打开图示的链接，进入网页后选择你需要的主题，点击下载主题，保存到本地【后面会用】。

放置文件

创建目录 ，在根目录下面创建theme文件夹；
拖拽文件，将已经下载好的文件放到一个文件夹中，比如命名 gray ,拖到theme文件夹中；

使用gulp实现切换

安装插件

npm install  gulp
npm install gulp-clean-css
npm install gulp-css-wrap

创建文件 （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('./theme/gray/index.css'))
        .pipe(