框架組件自動按需導(dǎo)入工具，不使用不會導(dǎo)入，可減少項目體積
unplugin-vue-components
1.安裝
npm i unplugin-vue-components -save-dev
2.配置
我這里用的是Vue CLI，所以要在vue.config.js文件中添加配置，官網(wǎng)中有寫不同打包工具的配置寫法
框架我使用的是Element Plus，使用前去官網(wǎng)查看自己的框架是否支持，主流框架都是支持的
引入：
// 組件自動加載
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
在configureWebpack.plugins中添加：
// 自動按需加載
Components({
resolvers: [ElementPlusResolver()],
}),
3.使用
我們之前使用全局引入或者是單個引入現(xiàn)在都不需要了。
運行
這個時候所有element的組件都可以自動引入了，我們直接在vue中使用就可以了
4.自動引入項目組件
我們除了會引入框架的組件也會有我們自定義的組件，unplugin-vue-components同樣支持我們自定義的組件的自動導(dǎo)入，只需要我們把組件放到src/components（默認(rèn)讀取路徑）文件夾中即可
我在這個文件夾中新建了一個名為HelloWord的組件
然后我們就可以直接引入使用了
然后運行看看
成功了！！
5.自定義組件路徑或多個組件路徑配置
在項目當(dāng)中可能我們不一定會把組件放在src/components（默認(rèn)讀取路徑）路徑下，或者我們可能有多個放組件的地方，我們只需要在配置中添加dirs屬性即可文章來源：http://www.zghlxwxcb.cn/news/detail-431379.html
Components({
dirs: ['src/components'],//可存在多個
resolvers: [ElementPlusResolver()],
}),
更多配置前往官網(wǎng)查看unplugin-vue-components文章來源地址http://www.zghlxwxcb.cn/news/detail-431379.html
到了這里，關(guān)于【插件推薦】vue3框架組件自動導(dǎo)入unplugin-vue-components的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
