安装 Ant Design of Vue 和@ant-design/icons-vue图标库

npm add ant-design-vue @ant-design/icons-vue

安装插件 unplugin-vue-components 配合vite可以自动帮我们引入组件

npm add unplugin-vue-components -D

配置 vite.config.ts

import { defineConfig } from "vite";
import { fileURLToPath, URL } from "url";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
  // 配置别名
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});