Beispiel für eine automatische Importmethode für allgemeine Vue3.0-Komponenten

1. Voraussetzungen

Wir verwenden zum Importieren die Methode require.context. Wenn wir sie in einem von vite erstellten Projekt verwenden, wird der Fehler „require not found“ gemeldet. Daher müssen wir zum Erstellen eines Projekts webpack verwenden. Oder kann mir jemand sagen, wie Vite dieses Problem lösen kann.

II. Regeln

Die von mir verwendete Registrierungsregel besteht darin, alle Verzeichnisse und Unterverzeichnisse unter dem Pfad src/components/ zu durchsuchen, nach Dateien mit dem Namen „index.vue“ zu suchen und den Namen des übergeordneten Verzeichnisses als Komponentennamen für die Registrierung zu verwenden. Der Aufbau ist wie folgt:

Es wird nur index.vue registriert, Komponenten mit anderen Namen werden nicht registriert.

3. Registrierung

Da vue3.0 keinen Import von „Vue“ aus vue hat, müssen wir zur Registrierung die App verwenden, daher können wir dies nur in main.js tun.

Eintragsdateiregistrierung

// src/main.js

importiere { createApp } von 'vue'
const app = createApp(App)
//Öffentliche Komponenten dynamisch registrieren const requireComponent = require.context(
    // Der relative Pfad des Komponentenverzeichnisses lautet '@/components',
    // Ob das Unterverzeichnis abgefragt werden soll, true,
    // Regulärer Ausdruck, der mit dem Dateinamen der Basiskomponente übereinstimmt /index.vue$/
)
const jieguo = requireComponent.keys().filter((item:any)=> true)
jieguo.forEach((item:any)=>{
    const componentConfig = requireComponent(Element)
    const name = item.split("/")[1]
    app.component(Name, Komponentenkonfiguration.Standard || Komponentenkonfiguration)
})
// Registrierung endet app.mount('#app')

Wenn wir eine öffentliche Komponente erstellen, löschen oder umbenennen, ist keine Registrierung erforderlich. Starten Sie das Projekt neu und trinken Sie einen Schluck Wasser.

Zusammenfassen

Dies ist das Ende dieses Artikels über den automatischen Import öffentlicher Komponenten von vue3.0. Weitere relevante Inhalte zum Import öffentlicher Komponenten von vue3.0 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!