一、自动按需引入插件安装

pnpm install unplugin-vue-components -D

二、配置插件

1、在vite.config.ts下添加代码，如下：

import Component from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import type { PluginOption } from 'vite'plugins: [Component({resolvers: [// 注意:按需引入，无法引入一些非组件模块，如：message,modal等，需要自定义手动导（src/plugin/antDesign）AntDesignVueResolver({importStyle: false //不单独导入样式，对样式进行全局引入})]}) as PluginOption
]

2、在mian.ts文件下引入全局样式文件

import 'ant-design-vue/dist/reset.css'

以上自动按需导入就配置好了，在项目中就可以直接使用组件了，无需再次进行导入

3、如在helloword.vue组件中使用Button组件

<script setup lang="ts">//注意：无需再次引入button组件了import { message } from "ant-design-vue";onMounted(()=>{message.warn('非组件模块，单独引入一下即可')})
</script><template><a-button type="primary">测试组件引入</a-button>
</template>