unplugin-vue-components强大的插件

unplugin-vue-components 是一款能帮助组件自动导入的库,简单点的说,你不需要使用import xx from ‘xxx.vue’ 这行语句也能实现导入的效果。
官网地址

官网显示支持这些解析器

具体用法这里简单介绍一下
首先安装插件

npm install  unplugin-vue-components  -D

vite.config.js (好像只支持vite，webpack不知道怎么配)

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import path from "path"
import {
    
     AntDesignVueResolver, VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/

export default defineConfig({
    
    
	root: './',
	base: '/',
	plugins: [
		vue(),
		Components({
    
    
			resolvers: [
			//这里配置解析器，具体参数官网有解释
				AntDesignVueResolver({
    
    
					resolveIcons: true,    //自动导入antdesign的icon组件
				}),
				VantResolver()
			],
		})
	],
	server: {
    
    
		host: "localhost",
		port: 8088
	},
	resolve: {
    
    
		// 配置路径别名
		alias: {
    
    
			"@": path.resolve(__dirname, "./src"),
		},
	}
})

做完上面两部你就可以直接在项目中随意使用组件了，unplugin-vue-components会自动找到template中的组件并且自动注册，是不是很牛逼