Ant Design For Vue 方案

基于ant-design-vue中的ConfigProvider配置主题色

准备

---

1. 安装ant-design-vue依赖

   yarn add ant-design-vue -S

实现

---

一、编写theme.js

import { ConfigProvider } from "ant-design-vue";

function changeTheme(color) {
  ConfigProvider.config({
    prefixCls: "main-app-theme",
    theme: {
      primaryColor: color || "#29CCCC",
    },
  });
}

export default changeTheme;

二、main.js 引入相关文件

import { createApp } from "vue";
import App from "./App.vue";
import 'ant-design-vue/dist/antd.variable.min.css';
import 'ant-design-vue/es/message/style/css';
import "./styles/index.scss";
import changeTheme from './theme';

changeTheme('#29CCCC');

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

三、index.scss使用如下

.container{
    background-color: var(--ant-primary-color);
}

四、vite.config.js配置如下

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [AntDesignVueResolver()],
    }),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: "less",
        }),
      ],
      dts: "src/components.d.ts",
    }),
  ],
});