unplugin-vue-components 是一款能幫助組件自動(dòng)導(dǎo)入的庫(kù),簡(jiǎn)單點(diǎn)的說(shuō),你不需要使用import xx from ‘xxx.vue’ 這行語(yǔ)句也能實(shí)現(xiàn)導(dǎo)入的效果。
官網(wǎng)地址
官網(wǎng)顯示支持這些解析器
具體用法這里簡(jiǎn)單介紹一下
首先安裝插件
npm install unplugin-vue-components -D
vite.config.js (好像只支持vite，webpack不知道怎么配)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-621015.html
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: [
//這里配置解析器，具體參數(shù)官網(wǎng)有解釋
AntDesignVueResolver({
resolveIcons: true, //自動(dòng)導(dǎo)入antdesign的icon組件
}),
VantResolver()
],
})
],
server: {
host: "localhost",
port: 8088
},
resolve: {
// 配置路徑別名
alias: {
"@": path.resolve(__dirname, "./src"),
},
}
})
做完上面兩部你就可以直接在項(xiàng)目中隨意使用組件了，unplugin-vue-components會(huì)自動(dòng)找到template中的組件并且自動(dòng)注冊(cè)，是不是很牛逼文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-621015.html
到了這里，關(guān)于unplugin-vue-components強(qiáng)大的插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![runtime-core.esm-bundler.js:40 [Vue warn]: Vue received a Component which was made a reactive object](https://imgs.yssmx.com/Uploads/2024/02/639721-1.png)
