安裝

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

引入 css 文件

在 src 目錄中創(chuàng)建一個 plugins 文件夾，并在 plugins 中創(chuàng)建一個 antd.ts 的樣式文件

// src/plugins/antd.ts

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

// 創(chuàng)建一個空函數(shù)，用來加載當(dāng)前文件
export function setupAntd() {}

在 src/main.ts 中調(diào)用 setupAntd() 方法

// src/main.ts

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

const app = createApp(App)

// 設(shè)置 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ǎo)入，也可以在任何地方使用，所以我們也要在 .d.ts 文件中對其進(jìn)行聲明 
                      {
                          from: 'vue-router', 
                          names: ['RouterLink', 'RouterView'],
                      },
                  ],
                 
                 // 自定義組件解析器
                  resolvers: [
                      AntDesignVueResolver({
                          // 將樣式與組件一起導(dǎo)入
                          importStyle: false, // css in js

                          // 排除不需要自動導(dǎo)入的組件
                          exclude: [],
                      }),
                  ],
              }),
         ],
     }
})