有時(shí)候有大量的組件.vue后綴的,或.js,或.ts文件, 需要一個(gè)個(gè)的手動(dòng)引入很麻煩,那么你可以嘗試這樣創(chuàng)建一個(gè)index.js
本項(xiàng)目使用vue3.x, vue2.x也可以照樣用;
image.png
這里在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)容,詳情可以自己打印試試;
image.png
然后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)讀取;
