vue3.0+ant-design-vue+定制主题（动态修改）

前言：vue3.0beta版上线，最近双十一，女生逛淘宝，程序员逛阿里云，也打算用nodeJs写一个后台项目，开发一个自己的网站，自己做嘛，没有那么多约束，风格就由自己来设计了。

1.安装npm包

npm i antd-theme-generator --save

查看了一下版本，最新的1.2.8，我当前的版本安装的就是这个，也可以去npm官方文档看一下,很详细

image.png

2.根目录新建一个文件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对应的目录路径
  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',
  ], //您要动态更改的变量列表
  outputFilePath: path.join (__dirname, './public/color.less'), //生成的color.less文件的位置
  customColorRegexArray: [/^color\(.*\)$/],
})
  .then (res => {
    console.log ('配置主题成功');
  })
  .catch (res => {
    console.log ('配置主题失败');
  });

3.新建styles相关文件

在color.js里面我们设置styleDir和varFile的属性路径，所以我们需要创建相关的文件。

创建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的时候，新建了一个color.js，所以说在serve和build的时候要执行一下color.js文件

image.png

4.main.ts中引入ant-design-vue中的less文件

注意：一定要引入.less结尾的文件，不要引入.css文件，否则修改不成功！！！！！！
我这个main.ts文件，自己封装了初始化的一些东西，跟vue-cli生成的不一样，只要关注一步就可以。

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

前几步完成之后，重启服务，因为我们color.js文件outputFilePath是在public下面

image.png

所以执行之后，会在public文件夹下面生成一个color.less文件。

image.png

修改index.html
注意添加的代码，不要设置到head里面，不然动态主题修改不成功，网上的很多解决方法，坑死了！！！！

6.动态设置主题

现在就button组件写了个示例。

点击，修改颜色成功，万事大吉！！！