vue

2024-05-24 12:43| 来源: 网络整理| 查看: 265

前言：这篇文章记录换肤的两个方面： 1.基于elementui这个ui框架的换肤 2.在vue项目里自己写的内容的换肤所用知识： vue , elementui , vuex , sass , gulp-css-wrap

首行祭图：这里写图片描述源码地址： https://github.com/EmilyYoung71415/vue-admin-elementui 思路在此：改变原有的elementui主题：安装elementui的自定义主题工具，然后初始化变量文件，得到elementui的scss文件，我们修改颜色就修改他的scss文件，然后编译scss文件得到css文件，我们引用修改好了的css文件[实现覆盖elementui的css文件]即可实现换肤。至于动态换肤：用上述方法生成不同主题[颜色值]的css文件后，我们怎么实现动态切换呢？我的办法是：

生成不同的css颜色文件，每个文件内部命名前加上.custom-颜色值做命名空间。然后app.vue里引入全部的颜色文件。用户点击某颜色，就在body加上class：custom-00a597 这样通过body的class改变就能实现真正使用不同的css文件。

1.将css文件里面加上特定的.XX类名比如这里写图片描述如颜色值为#00a597的css文件，我里面的每个选择器都加上了.custom-00a597 颜色值为#0000ff的css文件，加上了.custom-0000ff 怎么批量加呢？这里使用gulp-css-wrap这个神器具体细节请见另一篇博文：gulp-css-wrap工具的使用——[批量为css文件扩展命名空间] 或者官方文档：gulp 下面假装你已经有了增加命名空间的各个主题css文件 2 app.vue里引入全部的颜色文件 [当然也可以按需引入，动态的加载css]

//一个简单的动态加载css的栗子 var head = document.getElementsByTagName('HEAD').item(0); var style = document.createElement('link'); style.href = 'style.css'; style.rel = 'stylesheet'; style.type = 'text/css'; head.appendChild(style); 1234567

这里我简单粗暴地一次性完全载入：这里写图片描述

3 用户点击某颜色，就在body加上class：custom-00a597 //类似于document.body.className = ‘custom-00a597’

这里写图片描述思路大概如上，具体的细节如下：

1. Vue的elementUI实现自定义主题

使用vue开发项目，用到elementUI，根据官网的写法，我们可以自定义主题来适应我们的项目要求 Element官网上也提供了自定义主题的方案同时也提供了一个在线自定义主题的demo 按照官方文档，我们可以有两种办法实现自定义换肤。一.第一种方法：使用命令行主题工具二.第二种方法：直接修改element样式变量[前提是项目中使用scss编写] 现在我做的这个项目用的是第一种，因为第一种可以生成css文件，我们要在生成的css前面加各个类名。

1.1 使用命令行主题工具生成css文件 1.1.1 用vue-cli安装一个新项目： 1.1.2 安装elementUI及sass-loader,node-sass

(项目中使用scss编写需要依赖的插件)

//安装elementui npm i element-ui -S //安装sass npm i sass-loader node-sass -D 1234 1.1.3 安装elementui的自定义主题工具 //首先安装主题工具 npm i element-theme -g 12 //然后安装chalk主题 npm i element-theme-chalk -D 12 1.1.4 初始化变量文件 et -i [可以自定义变量文件，默认为element-variables.scss] > ✔ Generator variables file 123

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

$--color-primary: #409EFF !default; $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #eb9e05 !default; $--color-danger: #fa5555 !default; $--color-info: #878d99 !default; ... 123456789101112131415161718

code is cheap ,show me the “截图 ” 这里写图片描述

1.1.5 修改变量

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

$--color-primary: purple; 1 1.1.6 编译主题 et > ✔ build theme font > ✔ build element theme 1234

编译完之后会在根目录生成theme的文件夹这里写图片描述我们只需要引入theme/index.css即可

1.1.7 引入自定义主题

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

import '../theme/index.css' import ElementUI from 'element-ui' import Vue from 'vue' Vue.use(ElementUI) 12345 1.1.8 测试是否改变成功默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮 12345678

以上便是完成了第一步生成不同的css颜色文件。然后我们要在不同的css文件里扩展命令空间

1.2 不同的css文件里的每个元素外面包裹一个独特的class名字

方法：使用gulp-css-wrap神器具体使用见另一篇博文：gulp-css-wrap工具的使用——[批量为css文件扩展命名空间] 打广告X2 【逃这里让我们快进到已经生成好的那一步[就像美食节目做菜一秒快进到熟的感觉]

1.3 动态切换 1.3.1 将修改好的不同css颜色文件放到一个文件夹里

这里写图片描述我下面的common.scss是用于自己写的内容的换肤。这个之后再讲