使用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下

<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
  window.less = {
    async: true,
    env: 'production'
  };
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>//即时已经安装过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、使用

<template>
  <div>
    <div class="colorBlock" style="background:green" @click="changeColor('green')"></div>
    <div class="colorBlock" style="background:red" @click="changeColor('red')"></div>
    <div class="colorBlock" style="background:blue" @click="changeColor('blue')"></div>
    <div class="colorBlock" style="background:yellow" @click="changeColor('yellow')"></div>
  </div>
</template>
<script>
  export default {
   methods: {
    changeColor(color) {
      console.log(window.less)
      window.less
        .modifyVars({
          '@primary-color': color,
          '@link-color': color,
          '@btn-primary-bg': color
        })
        .then(() => {
          console.log('成功')
        })
        .catch(error => {
          alert('失败')
          console.log(error)
        })
    }
  }
}
<style lang="less" scoped>
.main {
  display: flex;
}
.colorBlock{
  margin-left: 10px;
  width: 30px;
  height: 30px;
}
</style>

原理：通过window.less.modifyVars方法，去动态的改变less变量。然后在调用color.js，在pulish中生成一个color.less文件，在index.html中重新引入一下，就实现了动态换肤功能。

ok，功能实现，结束。