vue element ui 切换肤色
本文章主要是做得一个用VUE构建的项目实现切换风格肤色的功能
1. 安装vue-cli
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install npm run dev
2.安装element-ui及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']
}
3. 安装elementui的自定义主题工具
npm i element-theme -g
npm i element-theme-chalk -D
4.初始化变量文件
et -i element-variables.scss
5. 这时根目录下会产生element-variables.scss
6.编译主题
更改primary的值之后一定要 命令行输入et
7.编译完成之后在主目录下生成theme的文件夹(此文件下的fonts以后有用)
编译完成之后会生成them文件
8.在main.js的入口文件中引入
import '../theme/index.css'
到此已经可以实现颜色切换功能了
9.使用gulp-css-wrap神器
npm install gulp
npm install gulp-clean-css
npm install gulp-css-wrap
10.在项目根目录下创建一个名为 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')) /* 存放的目录 */
})
custom-02abfd中的02abfd即为刚才生成自定义主题时的颜色
11. 执行gulp输出
gulp css-wrap
12.生成theme文件夹下的主题名称
此时文件夹下没有fonts文件夹,把生成主题时生成的fonts复制到此处即可
13.建立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 './vuex/store.js';
import './assets/css/theme/02abfd/index.css';
14.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求