vue?批量自動引入并注冊組件或路由實現(xiàn)詳解
更新時間：2023年07月07日 14:50:18 作者：littlesunn
這篇文章主要為大家介紹了vue?批量自動引入并注冊組件或路由實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
批量引入組件.vue后綴或.js,或.ts文件
有時候有大量的組件.vue后綴的,或.js,或.ts文件, 需要一個個的手動引入很麻煩,那么你可以嘗試這樣創(chuàng)建一個index.js
本項目使用vue3.x, vue2.x也可以照樣用;
這里在components里面創(chuàng)建了一個idnex.js 文件
require.context 讀取文件
第一個參數(shù)是指當(dāng)前文件夾, 第二個參數(shù)是是否遞歸遍歷尋找子節(jié)點設(shè)為ture, 第三個正則匹配
//自動注冊,不必一個個導(dǎo)入導(dǎo)出
const requireComponent = require.context(
// 其組件目錄的相對路徑
'./',
// 是否查詢其子目錄,遞歸查詢
true,
// 匹配基礎(chǔ)組件文件名的正則表達式
/.(vue)$/
)
var fileArr:any[] = [] //導(dǎo)出路由對象
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;這樣你就得到了一個數(shù)組,數(shù)組里面多個組件的對象,有名字,有組件內(nèi)容,詳情可以自己打印試試;
main.ts中引用
fileArr.forEach(item=>{
console.log(item.name, item.compnent);
vue.component(item.name, item.compnent); //全局注冊了
})遍歷fileArr,將所有的組件都注冊進去;這樣就是全局注冊了,使用的時候就不用一個一個的import了,這種做法小項目可以用,但是大型項目太多文件都全局注冊恐怕會影響性能;
按照這個思路,比如路由啊,api啊還有狀態(tài)管理這些模塊化的,大量的文件都不需要手動import了,只要你創(chuàng)建了這個文件,就會被自動讀取;
以上就是vue 批量自動引入并注冊組件或路由實現(xiàn)詳解的詳細內(nèi)容，更多關(guān)于vue引入注冊組件路由的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了Vue使用Markdown文檔的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue.js?中組件間通信的方法有很多種,這篇文章主要為大家詳細介紹了6種常見的直接或間接的組件傳值方式,有需要的小伙伴可以參考一下2024-01-01
vue2項目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問題
這篇文章主要介紹了vue2項目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue.js實現(xiàn)仿原生ios時間選擇組件實例代碼
本篇文章主要介紹了vue.js實現(xiàn)仿原生ios時間選擇組件實例代碼，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
Vue3 + ElementPlus動態(tài)合并數(shù)據(jù)相同的單元格的完整代碼
文章介紹了如何使用ElementPlus的Table組件動態(tài)合并單元格,適用于后臺數(shù)據(jù)返回格式動態(tài)且沒有規(guī)律的場景,包括數(shù)據(jù)處理和按鈕操作,文章還附帶了效果圖和代碼詳解,希望能對大家有所幫助,感興趣的朋友跟隨小編一起看看吧2025-02-02
路由攔截是一種在用戶訪問特定頁面之前對其進行攔截和處理的機制,下面這篇文章主要給大家介紹了關(guān)于vue前端img訪問鑒權(quán)后端進行攔截的相關(guān)資料,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
解決vue-cli webpack打包開啟Gzip 報錯問題
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報錯問題的解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue中SSR的作用及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
在vue中實現(xiàn)低代碼組件參數(shù)配置的流程步驟
這篇文章主要介紹了在vue中實現(xiàn)低代碼組件參數(shù)配置的流程步驟，文中的代碼示例講解的非常詳細，對我們的學(xué)習(xí)或工作有一定的參考價值,需要的朋友可以參考下2023-07-07