前言：vue3.0beta版上線，最近雙十一，女生逛淘寶，程序員逛阿里云，也打算用nodeJs寫一個(gè)后臺項(xiàng)目，開發(fā)一個(gè)自己的網(wǎng)站，自己做嘛，沒有那么多約束，風(fēng)格就由自己來設(shè)計(jì)了。
1.安裝npm包
npm i antd-theme-generator --save
查看了一下版本，最新的1.2.8，我當(dāng)前的版本安裝的就是這個(gè)，也可以去npm官方文檔看一下,很詳細(xì)
image.png
2.根目錄新建一個(gè)文件color.js
const path = require ('path');
const {generateTheme, getLessVars} = require ('antd-theme-generator');
const options = {};
generateTheme ({
antDir: path.join (__dirname, './node_modules/ant-design-vue'), //node_modules中antd的路徑
stylesDir: path.join (__dirname, './src/assets/styles'), //styles對應(yīng)的目錄路徑
varFile: path.join (__dirname, './src/assets/styles/variables.less'), //less變量的入口文件
themeVariables: [
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background',
], //您要動態(tài)更改的變量列表
outputFilePath: path.join (__dirname, './public/color.less'), //生成的color.less文件的位置
customColorRegexArray: [/^color\(.*\)$/],
})
.then (res => {
console.log ('配置主題成功');
})
.catch (res => {
console.log ('配置主題失敗');
});
3.新建styles相關(guān)文件
在color.js里面我們設(shè)置styleDir和varFile的屬性路徑，所以我們需要創(chuàng)建相關(guān)的文件。
創(chuàng)建variables.less文件
@link-color: #00375b;
@primary-color: green;
:root {
--PC: @primary-color; //color.less中加入css原生變量：--PC
}
.primary-color {
color: @primary-color;
}
看一下我的文件目錄
image.png
3.修改package.json文件
在步驟2的時(shí)候，新建了一個(gè)color.js，所以說在serve和build的時(shí)候要執(zhí)行一下color.js文件
image.png
4.main.ts中引入ant-design-vue中的less文件
注意：一定要引入.less結(jié)尾的文件，不要引入.css文件，否則修改不成功?。。。。?！
我這個(gè)main.ts文件，自己封裝了初始化的一些東西，跟vue-cli生成的不一樣，只要關(guān)注一步就可以。
import {createApp, defineComponent} from "vue";
import App from "./App.vue";
import {InitManager} from "./util/init";
import "ant-design-vue/dist/antd.less";
const instance = createApp(App);
InitManager.init(instance).mount("#app");
5.生成color.less文件并且修改index.html
前幾步完成之后，重啟服務(wù)，因?yàn)槲覀僣olor.js文件outputFilePath是在public下面
image.png
所以執(zhí)行之后，會在public文件夾下面生成一個(gè)color.less文件。
image.png
修改index.html
注意添加的代碼，不要設(shè)置到head里面，不然動態(tài)主題修改不成功，網(wǎng)上的很多解決方法，坑死了?。。。?/strong>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: false,
env:"production"
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
</body>
</script>
</html>
6.動態(tài)設(shè)置主題
現(xiàn)在就button組件寫了個(gè)示例。
<template>
<div class="login-page">
<div class="content">
<a-button type="primary" @click="updatePrimaryColor">點(diǎn)擊</a-button>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
// setup() {},
data() {
return {};
},
methods: {
updatePrimaryColor() {
(window as any).less
.modifyVars({
"primary-color": "blue",
"btn-primary-bg": "#5d72cc",
})
.then((res: any) => {
console.log("成功");
})
.catch((res: any) => {
console.log("錯(cuò)誤");
});
},
},
});
</script>
點(diǎn)擊，修改顏色成功，萬事大吉?。?！
