vue-基于elementui换肤

日期：2022-08-19 栏目：程序人生浏览：次

生成不同的css颜色文件，每个文件内部命名前加上.custom-颜色值做命名空间。

然后app.vue里引入全部的颜色文件。

用户点击某颜色，就在body加上class：custom-00a597
这样通过body的class改变就能实现真正使用不同的css文件。

1.将css文件里面加上特定的.XX类名比如

vue-基于elementui换肤

如颜色值为#00a597的css文件，我里面的每个选择器都加上了.custom-00a597
颜色值为#0000ff的css文件，加上了.custom-0000ff
怎么批量加呢？
这里使用gulp-css-wrap这个神器

2、gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]

vue-基于elementui换肤

1.搭建gulp环境
搭建环境在项目的代码环境中搭建。

//1.安装gulp：
npm install gulp

//2.安装gulp-clean-css
npm install gulp-clean-css

//3.安装gulp-css-wrap
npm install gulp-css-wrap

2.在项目根目录下创建一个名为 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-1b1e24\' /* 添加的命名空间 */
}))
.pipe(cleanCSS())
.pipe(gulp.dest(\'src/assets/css/theme/1b1e24\')) /* 存放的目录 */
})

3.执行gulp输出
//命令行
gulp css-wrap

3、使用命令行主题工具生成css文件

1、使用命令行主题工具生成css文件
2、用vue-cli安装一个新项目：
3、安装elementUI及sass-loader,node-sass
(项目中使用scss编写需要依赖的插件)

//安装elementui
npm i element-ui -S
//安装sass
npm i sass-loader node-sass -D

4、安装elementui的自定义主题工具
//首先安装主题工具
npm i element-theme -g

//然后安装chalk主题
npm i element-theme-chalk -D

5、初始化变量文件

et -i [可以自定义变量文件，默认为element-variables.scss]

这时根目录下会产生element-variables.scss（或自定义的文件）

6、修改变量

直接编辑 element-variables.scss 文件，例如修改主题色为自己所需要的颜色（如：紫色（purple））

$--color-primary: purple

7、编译主题

编译完之后会在根目录生成theme的文件夹.

只需要引入theme/index.css即可

8、引入自定义主题

将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入

import \'../theme/index.css\'
import ElementUI from \'element-ui\'
import Vue from \'vue\'

Vue.use(ElementUI)