unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。

unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别 template中使用的自定义组件并自动注册。

// 1、安装npm i unplugin-vue-components -D// 2、配置import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'import Components from 'unplugin-vue-components/vite'import { defineConfig } from 'vite'export default defineConfig({ plugins: [ Components({ dirs: ['src/components'], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import resolvers: [AntDesignVueResolver({ importStyle: false, resolveIcons: true })] }) ]}

当你使用unplugin-vue-components来引入ui库的时候，message, notification 等引入样式不生效。此时就需要安装vite-plugin-style-import即可

// vite.config.jsimport { defineConfig } from 'vite'import styleImport, { AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve} from 'vite-plugin-style-import'export default defineConfig({ plugins: [ styleImport({ resolves: [ AndDesignVueResolve(), VantResolve(), ElementPlusResolve(), NutuiResolve(), AntdResolve() ], // 自定义规则 libs: [ { libraryName: 'ant-design-vue', esModule: true, resolveStyle: (name) => { return `ant-design-vue/es/${ name}/style/index` } } ] }) ], // 引用使用less的库要配置一下 css: { preprocessorOptions: { less: { javascriptEnabled: true } } }})