Vue führt Komponenten oder Routen automatisch stapelweise ein und registriert sie, um eine detaillierte Erklärung zu erhalten

Führen Sie Komponenten stapelweise mit dem Suffix .vue oder .js- oder .ts-Dateien ein

Manchmal gibt es eine große Anzahl von Komponenten mit dem Suffix .vue oder .js- oder .ts-Dateien, und es ist mühsam, sie einzeln manuell einzuführen. Dann können Sie versuchen, eine index.js wie diese zu erstellen

Dieses Projekt verwendet vue3.x, vue2.x kann ebenfalls verwendet werden;

Hier wird eine idnex.js-Datei in Komponenten erstellt

require.context liest Dateien

Der erste Parameter bezieht sich auf den aktuellen Ordner, der zweite Parameter gibt an, ob rekursiv durchlaufen werden soll, um untergeordnete Knoten zu finden und auf „true“ zu setzen, und der dritte Parameter ist eine reguläre Übereinstimmung

//自动注册,不必一个个导入导出
const requireComponent = require.context(
  // 其组件目录的相对路径
  './',
  // 是否查询其子目录,递归查询
  true,
  // 匹配基础组件文件名的正则表达式
  /.(vue)$/
)
var fileArr:any[] = [] //导出路由对象
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;

 Auf diese Weise erhalten Sie ein Array. Die Objekte mehrerer Komponenten im Array haben Namen und Komponenteninhalte. Sie können die Details selbst ausdrucken und ausprobieren;

  

Referenziert in main.ts

fileArr.forEach(item=>{
    console.log(item.name, item.compnent);
    vue.component(item.name, item.compnent);   //全局注册了
})

Durchqueren Sie fileArr und registrieren Sie alle Komponenten. Dies ist eine globale Registrierung, und Sie müssen sie nicht einzeln importieren, wenn Sie sie verwenden. Dieser Ansatz kann für kleine Projekte verwendet werden, aber wenn bei großen Projekten zu viele Dateien global registriert sind, es kann die Leistung beeinträchtigen;

Nach dieser Idee sind viele Dateien wie Routing, API und Statusverwaltung modularisiert und müssen nicht manuell importiert werden. Solange Sie diese Datei erstellen, wird sie automatisch gelesen.