Ant design vue中实现动态更换主题色

一、创建vue项目

可视化创建步骤：cmd调出窗口，输入vue ui，自动在浏览器上打开新窗口

输入文件名 ，文件名最好是英文

然后进行配置功能，

根据需求选择配置功能

这里最好选择2.0版本，

 可以保存预设，下次直接使用

等待项目加载出来，找到文件，然后打开

二、安装相关依赖，这里可以直接在package.json文件里加入，在项目里加上框住的内容，然后npm i，

add ant-design-vue是UI库

ant-design-vue是依赖于less进行开发因此安装less和less-loader

更换主题的核心插件 antd-theme-generator

{
  "name": "demo09",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "node color && vue-cli-service serve --mode dev",
    "build": "node color && vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "^1.6.5",
    "antd-theme-generator": "^1.1.7",
    "core-js": "^3.6.5",
    "less": "^2.7.3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^2.7.3",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

安装好以后，在main.js里引用

import 'ant-design-vue/dist/antd.less'
import Antd from 'ant-design-vue'
Vue.use(Antd)

在public文件下的index.html文件里加入以下内容，在public文件里引入color.less文件

<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>

在根目录建一个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'), //对应具体位置
  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(() => {
  console.log('Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
});

在根目录创建一个style文件，文件里创建index.less和variables.less文件，index.less文件可以是空的，内容放在variables.less里，颜色自己设置，代码如下：

@import "~/ant-design-vue/lib/style/themes/default.less";
@link-color: #fdf907;
@primary-color: rgb(252, 5, 120);
:root { 
    --PC: @primary-color;   //color.less中加入css原生变量：--PC
 }
.primary-color{
  color:@primary-color
}

然后在你要用到的页面使用，我是在HelloWorld.vue中使用的，代码如下：

<template>
<div class="cont">
    <a-row>
      <a-col :span="12" :offset="6">
        <a-divider>设置颜色</a-divider>
        <h2>预设颜色</h2>
        <div class="yscont">
          <div class="ysitem" style="background:#3e91f7" @click="click('#3e91f7')"></div>
          <div class="ysitem" style="background:#e23c39" @click="click('#e23c39')"></div>
          <div class="ysitem" style="background:#e96033" @click="click('#e96033')"></div>
          <div class="ysitem" style="background:#f0af41" @click="click('#f0af41')"></div>
          <div class="ysitem" style="background:#58bfc1" @click="click('#58bfc1')"></div>
          <div class="ysitem" style="background:#72c140" @click="click('#72c140')"></div>
          <div class="ysitem" style="background:#3258e3" @click="click('#3258e3')"></div>
          <div class="ysitem" style="background:#6839c9" @click="click('#6839c9')"></div>
        </div>
        <h2>自定义颜色</h2>
        <a-input type="color" style="width:100px;margin-bottom:10px" v-model="color" @change="huan"></a-input>
        <a-divider>效果展示</a-divider>
        <a-button-group style="margin-right:10px">
          <a-button>Cancel</a-button>
          <a-button type="primary">OK</a-button>
        </a-button-group>
        <a-button-group>
          <a-button type="primary">L</a-button>
          <a-button>M</a-button>
          <a-button>M</a-button>
          <a-button type="dashed">R</a-button>
        </a-button-group>
        <br />
        <a-radio-group>
          <a-radio-button value="a">Hangzhou</a-radio-button>
          <a-radio-button value="b">Shanghai</a-radio-button>
          <a-radio-button value="c">Beijing</a-radio-button>
          <a-radio-button value="d">Chengdu</a-radio-button>
        </a-radio-group>

        <a-menu theme="dark">
          <a-sub-menu key="sub4">
            <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
            <a-menu-item key="11">Option 11</a-menu-item>
            <a-menu-item key="12">Option 12</a-menu-item>
          </a-sub-menu>
        </a-menu>
        <a-pagination :total="50" />

        <a-checkbox-group >
            <a-checkbox value="A">A</a-checkbox>
            <a-checkbox value="B">B</a-checkbox>
            <a-checkbox value="C">C</a-checkbox>
            <a-checkbox value="D">D</a-checkbox>
            <a-checkbox value="E">E</a-checkbox>
        </a-checkbox-group>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
    data () {
    return {
      color: ''
    }
  },
  methods: {
    click (color) {
      this.color = color
      this.huan()
    },
    huan () {
      window.less
        .modifyVars({
          '@primary-color': this.color,
          '@link-color': this.color,
          '@btn-primary-bg': this.color
        })
        .then(() => {
          console.log('成功')
        })
        .catch(error => {
          alert('失败')
          console.log(error)
        })
    }
  }
}
</script>


<style scoped>
.cont {
  padding: 100px 0;
}
.yscont {
  display: flex;
  margin-bottom: 10px;
}
.ysitem {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 5px;
  cursor: pointer;
}
.ysitem:hover {
  box-shadow: 2px 2px 2px #999;
}
</style>

项目目录

代码地址https://gitee.com/gaomeinan/ant-color