ant design vue 在线自定义更换主题颜色

先看demo
源码
原文地址
看到ant design pro 上的 主题颜色更换 感觉挺酷的 就研究了一下 ， 因为最近想用vue 重写一版博客 所有就 用的 vue + ant design 做的这个demo

1 创建项目

用vue cli 创建项目之后 需要先安装以下两个 插件 第一个是 ui 都知道 第二个是 用来改变颜色的插件
“ant-design-vue”: “^1.4.8”,
“antd-theme-generator”: “^1.1.7”

在 main.js 中 一定要 导入 antd.less

import ‘ant-design-vue/dist/antd.less’
import Antd from ‘ant-design-vue’
Vue.config.productionTip = false
Vue.use(Antd)

2 创建color.js

在跟目录下创建 color.js 内容为

const path = require('path');
const { generateTheme, getLessVars } = require('antd-theme-generator');
// ant-design-vue/dist/antd.less
const options = {
 antDir: path.join(__dirname, './node_modules/ant-design-vue'), //对应具体位置
 stylesDir: path.join(__dirname, './src/styles'),    //对应具体位置
 varFile: path.join(__dirname, './src/styles/variables.less'), //对应具体位置
 mainLessFile: path.join(__dirname, './src/styles/index.less'), //对应具体位置
 themeVariables: [
 '@primary-color',
 '@secondary-color',
 '@text-color',
 '@text-color-secondary',
 '@heading-color',
 '@layout-body-background',
 '@btn-primary-bg',
 '@layout-header-background'
  ],
 indexFileName: 'index.html',
 outputFilePath: path.join(__dirname, './public/color.less'),
}
generateTheme(options).then(less => {
 console.log('Theme generated successfully');
})
.catch(error => {
 console.log('Error', error);
});

3 创建style

在src目录下 创建 style 文件夹

在文件夹下创建 index.less variables.less 两个文件

其中 index.less 为空

variables.less 内容为

@import “~/ant-design-vue/lib/style/themes/default.less”;
@link-color: #00375B;
@primary-color: rgb(138, 164, 182);
.primary-color{
color:@primary-color
}

4 更改 html

在public 下的index.html 中 增加以下代码

注： 这段代码加在body末尾 别在head 上

5 更改 package.json

“serve”: “node color && vue-cli-service serve”,
“build”: “node color && vue-cli-service build”,
6 更改颜色

window.less
.modifyVars({
‘@primary-color’: this.color,
‘@link-color’: this.color,
‘@btn-primary-bg’: this.color
}) 这个方法用来更换颜色