vue3.0公共組件自動(dòng)導(dǎo)入的方法實(shí)例
一、前提
我們使用的是require.context方法導(dǎo)入，在vite創(chuàng)建的項(xiàng)目?jī)?nèi)使用會(huì)報(bào)錯(cuò)"require not found"，所以必須用webpack創(chuàng)建項(xiàng)目。或者有大能可以說(shuō)說(shuō)vite怎么解決這個(gè)問(wèn)題。
二、規(guī)則
我使用的注冊(cè)規(guī)則是，搜索src/components/路徑下的所有目錄和子目錄，搜索文件名叫做"index.vue"的文件，使用上級(jí)目錄的名字作為組件名，進(jìn)行注冊(cè)。結(jié)構(gòu)如下：
只注冊(cè)index.vue，其他名字的組件不注冊(cè)，
三、注冊(cè)
由于vue3.0沒(méi)有import “Vue” from vue，我們需要使用app來(lái)注冊(cè)，所以只能在 main.js
入口文件注冊(cè)
// src/main.js
import { createApp } from 'vue'
const app = createApp(App)
// 動(dòng)態(tài)注冊(cè)公共組件
const requireComponent = require.context(
// 其組件目錄的相對(duì)路徑
'@/components',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/index.vue$/
)
const jieguo = requireComponent.keys().filter((item:any)=> true)
jieguo.forEach((item:any)=>{
const componentConfig = requireComponent(item)
const name = item.split("/")[1]
app.component(name,componentConfig.default || componentConfig)
})
// 注冊(cè)結(jié)束
app.mount('#app')
當(dāng)我們新建、刪除、給公共組件改名等操作，注冊(cè)方面就不需要任何操作了。重啟一下項(xiàng)目，喝口水的時(shí)間就行了 。
總結(jié)
到此這篇關(guān)于vue3.0公共組件自動(dòng)導(dǎo)入的文章就介紹到這了,更多相關(guān)vue3.0公共組件導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue基于mint-ui的城市選擇3級(jí)聯(lián)動(dòng)的示例
本篇文章主要介紹了vue基于mint-ui的城市選擇3級(jí)聯(lián)動(dòng)的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue-CLI 項(xiàng)目在pycharm中配置方法
這篇文章主要介紹了Vue-CLI 項(xiàng)目在pycharm中配置方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue實(shí)現(xiàn)子路由調(diào)用父路由的方法
這篇文章主要介紹了vue實(shí)現(xiàn)子路由調(diào)用父路由的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)
單頁(yè)面應(yīng)用的一個(gè)問(wèn)題就是首頁(yè)加載東西過(guò)多，加載時(shí)間過(guò)長(zhǎng)。特別在移動(dòng)端，單頁(yè)面應(yīng)用的首屏加載優(yōu)化更是繞不開(kāi)的話題，這篇文章主要介紹了vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)，感興趣的小伙伴們可以參考一下2019-04-04
詳解vue開(kāi)發(fā)中調(diào)用微信jssdk的問(wèn)題
這篇文章主要介紹了vue開(kāi)發(fā)中調(diào)用微信jssdk的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家介紹了Vue之props 配置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助,希望能夠給你帶來(lái)幫助2021-11-11
Vue3源碼通過(guò)render?patch?了解diff
這篇文章主要為大家介紹了Vue3源碼系列通過(guò)render及patch了解diff原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
下面小編就為大家?guī)?lái)一篇淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue 2.0在IE11中打開(kāi)項(xiàng)目頁(yè)面空白的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue 2.0在ie 11中打開(kāi)項(xiàng)目頁(yè)面空白問(wèn)題的解決方法，文中詳細(xì)分析出現(xiàn)該問(wèn)題的原因，并給出了詳細(xì)的解決方法，需要的朋友可以參考借鑒，下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07