有時(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è)正則匹配

這樣你就得到了一個(gè)數(shù)組,數(shù)組里面多個(gè)組件的對(duì)象,有名字,有組件內(nèi)容(這些文件都是會(huì)有export default導(dǎo)出東西才有意義),詳情可以自己打印試試;

然后main.ts中引用;

遍歷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)讀取;

對(duì)你有幫助的話(huà),幫忙點(diǎn)贊投幣呀!