Vue主题切换源代码 vue-topic-switching

# Vue 实现切换主题操作 > 参考地址：https://blog.csdn.net/youlinaixu/article/details/83447527 ## 安装vue-cli ``` bash npm install -g vue-cli vue init webpack vue_demo cd vue_demo npm install npm run dev ``` ## 安装element-ui及sass 由于Element的theme-chalk使用sass编写，所以需要安装sass ``` npm i element-ui -S npm install --save-dev sass-loader npm install --save-dev node-sass ``` ## 在build 文件夹下的 webpack.base.conf.js的 ‘rules’里面添加配置 ``` { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } ``` ## 安装elementui的自定义主题工具 ``` npm i element-theme -g npm i element-theme-chalk -D ``` ## 初始化主题变量文件 ``` et -i element-variables.scss ``` 初始化以后目录中产生 ** element-variables.scss ** 文件 更改** --color-primary ** 的值， 然后命令行输入et 编译主题文件，生成的 `theme` 文件。 ## 使用gulp-css-wrap ``` npm install gulp npm install gulp-clean-css npm install gulp-css-wrap ``` ## 在项目根目录下创建一个名为 gulpfile.js 的文件 ``` // 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/index.css')) /* 找需要添加命名空间的css文件，支持正则表达式 */ .pipe(cssWrap({ selector: '.custom-02abfd' /* 添加的命名空间 */ })) .pipe(cleanCSS()) .pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目录 */ }) ``` ## 执行gulp输出 ``` gulp css-wrap ``` 注意：这里会报错```gulp: command not found``` 解决办法： ``` npm config set prefix /usr/local // 重设路径 npm install -g gulp ``` 注意：再次执行```gulp css-wrap``` 以后只有index 文件，font文件直接从刚刚的theme文件中复制过来。 ## 建立store文件存储主题状态 ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ themecolor:'20a0ff'//默认为20a0ff }, mutations:{ //更新主题颜色 setThemeColor(state,curcolor){ this.state.themecolor = curcolor; } } }); export default store; ``` ## 在main.js入口文件中引用 ``` import store from '@/store/index.js' import './assets/css/theme/02abfd/index.css' new Vue({ el: '#app', store …… }) ``` 注意：这里会由于Vue和Vuex版本不对应导致警告，解决办法： > 参考：https://blog.csdn.net/weixin_51190886/article/details/122917594 ``` // 卸载vuex npm uninstall vuex // 安装vuex3 npm install vuex@3 ```