1.安裝
npm i unplugin-vue-components -save-dev2.配置
我這里用的是Vue CLI，所以要在vue.config.js文件中添加配置，官網中有寫不同打包工具的配置寫法
框架我使用的是Element Plus，使用前去官網查看自己的框架是否支持，主流框架都是支持的
引入：
?
// 組件自動加載
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
在configureWebpack.plugins中添加：
// 自動按需加載
Components({resolvers: [ElementPlusResolver()],
}),
3.使用
我們之前使用全局引入或者是單個引入現在都不需要了。
?
4.自動引入項目組件
我們除了會引入框架的組件也會有我們自定義的組件，unplugin-vue-components同樣支持我們自定義的組件的自動導入，只需要我們把組件放到src/components（默認讀取路徑）文件夾中即可
?
我在這個文件夾中新建了一個名為HelloWord的組件
?
然后我們就可以直接引入使用了
?
5.自定義組件路徑或多個組件路徑配置
在項目當中可能我們不一定會把組件放在src/components（默認讀取路徑）路徑下，或者我們可能有多個放組件的地方，我們只需要在配置中添加dirs屬性即可
?
Components({dirs: ['src/components'],//可存在多個resolvers: [ElementPlusResolver()],
}),
)
)
