vue3.0+ant-design-vue+定制主题(动态修改)

前言:vue3.0beta版上线,最近双十一,女生逛淘宝,程序员逛阿里云,也打算用nodeJs写一个后台项目,开发一个自己的网站,自己做嘛,没有那么多约束,风格就由自己来设计了。

1.安装npm包

npm i antd-theme-generator --save

查看了一下版本,最新的1.2.8,我当前的版本安装的就是这个,也可以去npm官方文档看一下,很详细

image.png

2.根目录新建一个文件color.js

const path = require ('path');

const {generateTheme, getLessVars} = require ('antd-theme-generator');
const options = {};
generateTheme ({
  antDir: path.join (__dirname, './node_modules/ant-design-vue'), //node_modules中antd的路径
  stylesDir: path.join (__dirname, './src/assets/styles'), //styles对应的目录路径
  varFile: path.join (__dirname, './src/assets/styles/variables.less'), //less变量的入口文件
  themeVariables: [
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background',
    '@btn-primary-bg',
    '@layout-header-background',
  ], //您要动态更改的变量列表
  outputFilePath: path.join (__dirname, './public/color.less'), //生成的color.less文件的位置
  customColorRegexArray: [/^color\(.*\)$/],
})
  .then (res => {
    console.log ('配置主题成功');
  })
  .catch (res => {
    console.log ('配置主题失败');
  });

3.新建styles相关文件

在color.js里面我们设置styleDirvarFile的属性路径,所以我们需要创建相关的文件。

创建variables.less文件

@link-color: #00375b;
@primary-color: green;
:root {
  --PC: @primary-color; //color.less中加入css原生变量:--PC
}
.primary-color {
  color: @primary-color;
}

看一下我的文件目录


image.png

3.修改package.json文件

在步骤2的时候,新建了一个color.js,所以说在servebuild的时候要执行一下color.js文件

image.png

4.main.ts中引入ant-design-vue中的less文件

注意:一定要引入.less结尾的文件,不要引入.css文件,否则修改不成功!!!!!!
我这个main.ts文件,自己封装了初始化的一些东西,跟vue-cli生成的不一样,只要关注一步就可以。

import {createApp, defineComponent} from "vue";
import App from "./App.vue";
import {InitManager} from "./util/init";
import "ant-design-vue/dist/antd.less";

const instance = createApp(App);
InitManager.init(instance).mount("#app");

5.生成color.less文件并且修改index.html

前几步完成之后,重启服务,因为我们color.js文件outputFilePath是在public下面

image.png

所以执行之后,会在public文件夹下面生成一个color.less文件。
image.png

修改index.html
注意添加的代码,不要设置到head里面,不然动态主题修改不成功,网上的很多解决方法,坑死了!!!!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <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>
  </body>
  </script>
</html>

6.动态设置主题

现在就button组件写了个示例。

<template>
  <div class="login-page">
    <div class="content">
      <a-button type="primary" @click="updatePrimaryColor">点击</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
  // setup() {},
  data() {
    return {};
  },
  methods: {
    updatePrimaryColor() {
      (window as any).less
        .modifyVars({
          "primary-color": "blue",
          "btn-primary-bg": "#5d72cc",
        })
        .then((res: any) => {
          console.log("成功");
        })
        .catch((res: any) => {
          console.log("错误");
        });
    },
  },
});
</script>

点击,修改颜色成功,万事大吉!!!

推荐阅读更多精彩内容