vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解
批量引入組件.vue后綴或.js,或.ts文件
有時(shí)候有大量的組件.vue后綴的,或.js,或.ts文件, 需要一個(gè)個(gè)的手動(dòng)引入很麻煩,那么你可以嘗試這樣創(chuàng)建一個(gè)index.js
本項(xiàng)目使用vue3.x, vue2.x也可以照樣用;
這里在components里面創(chuàng)建了一個(gè)idnex.js 文件
require.context 讀取文件
第一個(gè)參數(shù)是指當(dāng)前文件夾, 第二個(gè)參數(shù)是是否遞歸遍歷尋找子節(jié)點(diǎn)設(shè)為ture, 第三個(gè)正則匹配
//自動(dòng)注冊(cè),不必一個(gè)個(gè)導(dǎo)入導(dǎo)出
const requireComponent = require.context(
// 其組件目錄的相對(duì)路徑
'./',
// 是否查詢其子目錄,遞歸查詢
true,
// 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/.(vue)$/
)
var fileArr:any[] = [] //導(dǎo)出路由對(duì)象
requireComponent.keys().forEach((fileName) => {
// 獲取組件配置
const componentConfig = requireComponent(fileName)
let compName = fileName.split("/")[fileName.split("/").length - 1].split(".")[0];
if (componentConfig.default) {
fileArr.push({
name: compName,
compnent: componentConfig.default
})
}
})
export default fileArr;這樣你就得到了一個(gè)數(shù)組,數(shù)組里面多個(gè)組件的對(duì)象,有名字,有組件內(nèi)容,詳情可以自己打印試試;
main.ts中引用
fileArr.forEach(item=>{
console.log(item.name, item.compnent);
vue.component(item.name, item.compnent); //全局注冊(cè)了
})遍歷fileArr,將所有的組件都注冊(cè)進(jìn)去;這樣就是全局注冊(cè)了,使用的時(shí)候就不用一個(gè)一個(gè)的import了,這種做法小項(xiàng)目可以用,但是大型項(xiàng)目太多文件都全局注冊(cè)恐怕會(huì)影響性能;
按照這個(gè)思路,比如路由啊,api啊還有狀態(tài)管理這些模塊化的,大量的文件都不需要手動(dòng)import了,只要你創(chuàng)建了這個(gè)文件,就會(huì)被自動(dòng)讀取;
以上就是vue 批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于vue引入注冊(cè)組件路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實(shí)現(xiàn)底圖添加，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue打包后的線上部署Apache、nginx全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vite配置別名并處理報(bào)錯(cuò):找不到模塊“xxx”或其相應(yīng)的類型聲明方法詳解
我在學(xué)習(xí)vue3+vite+ts的時(shí)候,在配置別名這一步的時(shí)候遇到了一個(gè)問題,這篇文章主要給大家介紹了關(guān)于vite配置別名并處理報(bào)錯(cuò):找不到模塊“xxx”或其相應(yīng)的類型聲明的相關(guān)資料,需要的朋友可以參考下2022-11-11
el-table表頭添加勾選框的實(shí)現(xiàn)示例
本文主要介紹了el-table表頭添加勾選框的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue實(shí)現(xiàn)自定義組件改變組件背景色(示例代碼)
要實(shí)現(xiàn) Vue 自定義組件改變組件背景色,你可以通過 props 將背景色作為組件的一個(gè)屬性傳遞給組件,在組件內(nèi)部監(jiān)聽這個(gè)屬性的變化,并將其應(yīng)用到組件的樣式中,下面通過示例代碼介紹Vue如何實(shí)現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧2024-03-03
vue中使用axios請(qǐng)求post接口發(fā)送兩次
這篇文章主要為大家介紹了vue中使用axios請(qǐng)求post接口,請(qǐng)求會(huì)發(fā)送兩次原因解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
VUE項(xiàng)目運(yùn)行npm install報(bào)錯(cuò)問題以及解決
在運(yùn)行Vue項(xiàng)目時(shí)遇到npm安裝錯(cuò)誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無法運(yùn)行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項(xiàng)目目錄下運(yùn)行2024-10-10
在vue2中v-model使用的還是挺多的,不過這個(gè)指令一般是用在了輸入框中,并且這個(gè)指令其實(shí)就是個(gè)語法糖,下面這篇文章主要給大家介紹了關(guān)于vue3組件中v-model的使用以及深入講解的相關(guān)資料,需要的朋友可以參考下2021-09-09