1 下载antd

npm install ant-design-vue --save

2 配置按需引入

下载unplugin-vue-componentst插件

npm install unplugin-vue-components -D

3 配置vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import Components from 'unplugin-vue-components/vite';// 增加
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";//增加

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 添加 自动加载antdui
        Components({
            resolvers: [AntDesignVueResolver()]
        })
    ],
    // 路径别名配置start
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        },
    }
    // 路径别名配置end
});

在之前配置的home里试验一下，按钮已经成功

<template>
    <div>home</div>
    <a-button>111</a-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        return {};
    }
});
</script>

如需全部引入可查看官网配置： Ant Design of Vue - Ant Design Vue (antdv.com) unplugin-vue-components插件介绍：尤大推荐的神器unplugin-vue-components,解放双手!以后再也不用呆呆的手动引入(组件,ui(Element-ui)库,vue hooks等) - 掘金 (juejin.cn)