认识

准备

---

1. 安装ant-design-vue

   yarn add ant-design-vue -S

使用

---

Vite 版

1. theme.js 编写如下:

   import { ConfigProvider } from "ant-design-vue";
   
   function changeTheme(color) {
   ConfigProvider.config({
       prefixCls: "main-app-theme",
       theme: {
           primaryColor: color || "#29CCCC",
       },
   });
   }
   
   export default changeTheme;

2. 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");

3. index.scss 使用如下:

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

4. 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",
           }),
       ],
   });