安装

pnpm add --save ant-design-vue@4.x

引入 css 文件

在 src 目录中创建一个 plugins 文件夹，并在 plugins 中创建一个 antd.ts 的样式文件

// src/plugins/antd.ts

// 引入 antd 样式
import 'ant-design-vue/dist/reset.css'

// 创建一个空函数，用来加载当前文件
export function setupAntd() {}

在 src/main.ts 中调用 setupAntd() 方法

// src/main.ts

import { setupAntd } from './plugins/antd'

const app = createApp(App)

// 设置 antd
setupAntd()

app.mount('#app')

配置自动按需引入 antd 组件

安装插件 unplugin-vue-components

pnpm add unplugin-vue-components -D

配置 vite.config.js

// vite.config.js

import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig(({command, mode}) => {
     return {
         plugins: [
              Components({
                  // 生成组件的全局声明，也接受自定义文件名的路径
                  dts: 'types/components.d.ts',
                  types: [
                      // vue-router 这个库会为我们自动注册一些全局组件，以方便我们无需导入，也可以在任何地方使用，所以我们也要在 .d.ts 文件中对其进行声明 
                      {
                          from: 'vue-router', 
                          names: ['RouterLink', 'RouterView'],
                      },
                  ],
                 
                 // 自定义组件解析器
                  resolvers: [
                      AntDesignVueResolver({
                          // 将样式与组件一起导入
                          importStyle: false, // css in js

                          // 排除不需要自动导入的组件
                          exclude: [],
                      }),
                  ],
              }),
         ],
     }
})