使用ant-design-vue开发换肤功能

1、安装ant-design-vue
npm i ant-design-vue --save
2、在main.js中引入

    `import Antd from 'ant-design-vue'`
    `import 'ant-design-vue/dist/antd.less'`  //这里注意一定要引入`.less`,如果引入`.css`的话，不能更改less变量，就无法实现换肤。
    `Vue.use(Antd)`

3、安装antd-theme-generator，less插件
npm i antd-theme-generator --save
npm i less --save
npm i less-loader --save
4、在src目录下新建styles文件夹，里面新建index.less,variables.less文件
variables.less内容

@import '~ant-design-vue/es/style/themes/default.less';  //引入默认less样式文件
@link-color: #00375b;
@primary-color: rgb(138, 164, 182); //默认基础色
:root {
  --PC: @primary-color; //color.less中加入css原生变量：--PC
}
.primary-color {
  color: @primary-color;  //后期换肤修改基础色就是在这里
}

index.less文件为空
5、项目根目录下新建color.js文件

const path = require('path')
const { generateTheme } = require('antd-theme-generator')
// ant-design-vue/dist/antd.less
const options = {
  antDir: path.join(__dirname, './node_modules/ant-design-vue'), //node_modules中的antd目录的路径
  stylesDir: path.join(__dirname, './src/styles'), //对应具体位置
  varFile: path.join(__dirname, './src/styles/variables.less'), //与主题相关的变量文件的路径
  mainLessFile: path.join(__dirname, './src/styles/index.less'), //less主文件入口
  themeVariables: [ //动态更改的变量列表
    '@primary-color',  //基础颜色
    '@secondary-color',
    '@text-color',  //文本颜色，如果不更改，将会和primary-color保持一致
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background',  //body背景色
    '@btn-primary-bg',
    '@layout-header-background'
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less')//生成的less文件放入到指定位置，下面会用到此路径
}
generateTheme(options)
  .then(less => {
    console.log('Theme generated successfully')
  })
  .catch(error => {
    console.log('Error', error)
  })

6、在publish文件夹下index.html文件中添加以下行，必须添加到body下

//即时已经安装过less插件，此处仍需要引入此文件，否则会报错 Error in v-on handler: "TypeError: window.less.modifyVars is not a function"

7、修改package.json的启动和打包指令

"dev": "node color && vue-cli-service serve --open",
"build": "node color && vue-cli-service build",

8、使用