记录vue2+ant-design-vue框架换肤
毅争晨夕 2024-09-04 09:33:02 阅读 69
最近接手了个项目，要进行一个换肤，用的vue2加ant-design-vue组件，仿网上的进行写了下换肤，自己记录一下。
因为这个项目没有less,我需要下载一下，最开始下载的是版本less，然后运行报错了，就换成了指定版本：
"less": "^2.7.2",
"less-loader": "^5.0.0",
此框架要换肤，还要用到它： "antd-theme-generator": "^1.2.11",
然后要在man.js引入下面文件，因为我的项目是按需引入的，而且是一个单独文件，但引入方法一样.
<code>//测试换肤
import "ant-design-vue/dist/antd.less"
引入完成后，还要在config里面进行配置这些东西
module.exports = {
dev:{
...// 项目自定义的api路径
},
//与dev同级别下
css: {
loaderOptions: {
less: {
// lessOptions: { //如果less在5以上吧可能要打开此设置
javascriptEnabled: true, //主要是他
// // modifyVars: {
// // 初始化可直接覆盖变量
// // 'theme-color': '#1890FF',
// //},
// 兼容 less-loader 3.x
// math: "always",
// } //如果less在5以上吧可能要打开此设置
}
}
},
}
我看网上生效要设置style为true，我在我的 .babelrc 文件里面把下面的style设置为了true,
依据网上的方法(Teln_小凯)，然后在src目录下创建一个theme文件夹，然后按照下面展示的内容依次创建。
一：cus-theme.less文件内容如下：
<code>
.ant-layout-header {
background-color: @header-back-color;
.header-item:hover{
background-color: @header-item-hover-color;
}
}
二：variables.less内容如下：
//插件默认主题变量+这些变量必须在themejs里面定义好
@primary-color: #1890ff; // 全局主色
//自定义样式
@header-item-hover-color:blue;//头部项浮动颜色
@header-back-color:#1890ff;//头部底色
三：theme.js文件内容如下
const fs = require("fs");
const path = require('path');
const { generateTheme } = require('antd-theme-generator');
const options = {};
//生成的theme.less文件的位置
const outputFilePath = path.join(__dirname, '../../../static/theme.less');
//自定义样式
const cusCssFilePath = path.join(__dirname, '../cus-theme.less');
generateTheme({
//node_modules中antd的路径
antDir: path.join(__dirname, '../../../node_modules/ant-design-vue'),
//styles对应的目录路径,需要和下面的variables.less在一个文件夹
stylesDir: path.join(__dirname, '../'),
//less变量的入口文件，variables.less里面定义的变量，必须在themeVariables里面定义
varFile: path.join(__dirname, '../variables.less'),
//您要动态更改的变量列表
themeVariables: ['@primary-color', '@header-item-hover-color', '@header-back-color'],
outputFilePath: outputFilePath,
customColorRegexArray: [/^color\(.*\)$/],
})
.then(res => {
console.log('主题成功');
//自定义样式与ant主题样式合并
//读取提取过的ant样式
const themeCss = fs.readFileSync(outputFilePath).toString();
//读取自定义的CSS
const cusCss = fs.readFileSync(cusCssFilePath).toString();
fs.writeFileSync(outputFilePath, themeCss + cusCss);
//重新覆盖themeCss
console.log(`主题成功. OutputFile: ${outputFilePath}`)
})
.catch(res => {
console.log('配置主题失败');
});
然后要在我们的index.html里面进行配置内容
<body>
<div id="app"></div>code>
<!--主要是下面这些内容-->
<link rel="stylesheet/less" type="text/css" href="/static/theme.less" />code>
<script>
window.less = {
async: false,
env: "production",
};
// document.getElementById('app').style.setProperty('--color',
// '$store.state.headerColor')
</script>
<script type="text/javascript" code>
src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>code>
<!-- <script type="text/javascript" src="/static/less.min.js"></script> -->code>
</body>
此时我要把启动命令换一下,主要是&&前面的命令，后面webpack~那些是项目本身的(根据项目自定义)。
"dev": "node src/theme/js/theme.js && webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node src/theme/js/theme.js && node build/build.js"
启动项目完成后会发现在static下有个theme.less文件
如果启动报错，可能是less版本不对或者antd-theme-generator版本不对，根据项目版本可以下载对应的指定版本（npm install antd-theme-generator@1.2.11 --save）,不要忘了重新npm i 一下。
为了确保在本地能够持久化，我用store和本地存储，
const state = {
headerColor: localStorage.getItem('headerColor') ? localStorage.getItem('headerColor') : '#474c5a',
}
mutations:{
//测试换肤
setHeaderColor (state, val) {
state.headerColor = val
localStorage.setItem('headerColor', val)
},
},
actions: {
updateHeaderColor (context, color) {
context.commit('setHeaderColor', color);
},
}
我直接把颜色绑定到了全局上（App.vue）里面（省事）
为了求稳 然后在app.vue里面又做了监听
<code>data(){
return{
color1:'#5784BC',
}
},
//测试换肤
watch:{
"$store.state.headerColor":{
handler(val,oldval){
this.color1=val;
},
immediate:true
},
},
剩下的就是用颜色选择器了，这个组件我用的版本低 没有颜色选择器 为了方便，我用了elementUi的。
<div>
<span>主题色选择：</span>
<el-color-picker
v-model="color1"code>
@change="changeColor"code>
></el-color-picker>
</div>
data() {
return {
color1:"#2F9B78",
}
}
//...//
methods:{
changeColor(color) {
this.color1 = color;
this.$store.commit("setHeaderColor", color);
window.less.modifyVars({
"primary-color": localStorage.getItem("headerColor")
? localStorage.getItem("headerColor")
: color,
//或者这样写也行 "primary-color":this.$store.state.headerColor,
"header-item-hover-color": localStorage.getItem("headerColor")
? localStorage.getItem("headerColor")
: color,
"header-back-color": localStorage.getItem("headerColor")
? localStorage.getItem("headerColor")
: color,
});
this.$message.success("配置成功")
},
}
此时此刻我发现可以完成换肤了，但这是老项目，本身没有增加这个功能，之前颜色都是写死的，我找到了我项目中的base.css文件(相当于全局文件吧)，把一些字体颜色什么换成了var(--color)。
然后我在界面写入颜色的时候用的动态:var(--color),比如 color:var(--color);
看着网上的一些方法进行编写，然后报错了进行依次处理，就这样完成了。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。