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

在根目录建一个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中使用的，代码如下：

项目目录

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