Praktische Fähigkeiten, die beim Aufrufen von UNI-APP-Komponenten im easycom-Modus beherrscht werden müssen

Dieser Artikel soll als Ausgangspunkt für Diskussionen dienen. Ausführliche Dokumentation und Easycom-Spezifikationen finden Sie auf der offiziellen Website der Uni-App. 【Portal】easycom-Modusbeschreibung

Einführung in den Easycom-Komponentenmodus

• Der Easycom-Komponentenmodus wird seit HBuilderX 2.5.5 unterstützt. Wenn die HBuiderX-Version niedriger ist, suchen Sie bitte zuerst nach Updates!
  

uni-app wird auf Basis von VUE entwickelt. Normalerweise werden Komponenten zuerst installiert, dann importiert und global oder lokal registriert. Anschließend können Sie die entsprechenden Bausteine ​​in der Seite verwenden. Der Vorgang ist ziemlich umständlich, aber uni-app verwendet das easycom-Komponentenmodell, um die oben genannten drei Schritte zu vereinfachen, sodass Benutzer Komponenten direkt auf der Seite verwenden können, ohne sie zu referenzieren oder zu registrieren. Voraussetzung ist natürlich, dass bestimmte Easycom-Spezifikationen eingehalten werden. Der tatsächliche Nutzungseffekt ist wie folgt:

<Vorlage>
    <Klasse anzeigen="Container">
        <uni-liste>
            <uni-list-item title="Erste Zeile"></uni-list-item>
            <uni-list-item title="Zweite Reihe"></uni-list-item>
        </uni-list>
    </Ansicht>
</Vorlage>
<Skript>
    // Es ist nicht erforderlich, die Uni-List-Komponente in Komponenten zu importieren oder zu registrieren. In der Vorlage können Sie direkt „export default {“ verwenden.
        Daten() {
            zurückkehren {

            }
        }
    }
</Skript>

Uni-App Standard Easycom Spezifikation

Wenn Sie Komponenten wie den obigen Codeblock direkt auf der Seite verwenden möchten, müssen Sie beim Installieren oder Anpassen von Komponenten die folgenden Spezifikationen beachten:

• Komponentendateien müssen im components abgelegt werden.
• Die der Komponente entsprechende .vue-Datei muss im Dateiverzeichnis mit demselben Namen wie die Komponente abgelegt werden.
• Die Textbeschreibung ist möglicherweise nicht ganz klar. Schauen Sie sich einfach das Effektbild an:
  

components/uni-swipe-action/uni-swipe-action.vue

Benutzerdefiniertes Komponentenplatzierungsverzeichnis

• Die Standardspezifikation von easycom für uni-app besteht darin, Komponenten im Komponentenverzeichnis zu platzieren
• Gleichzeitig können wir mit uni-app auch das Standardverzeichnis und die Übereinstimmungsregeln für die Komponentenplatzierung ändern.
  

Easycom ist automatisch aktiviert und muss nicht manuell aktiviert werden. Bei Bedarf können Sie die Einstellungen in der Easycom-Routine in pages.json anpassen, beispielsweise das automatische Scannen ausschalten oder die Strategie der Scan-Matching-Komponente anpassen. Stellen Sie die Parameter wie folgt ein:

Die offiziellen Referenzregeln für die benutzerdefinierte Konfiguration lauten wie folgt:
[Vue-Dateien in Node_Modulen abgleichen]

"easycom": {
  "autoscan": wahr,
  "Brauch": {
    "uni-(.*)": "@/components/uni-$1.vue", // Stimmt mit Vue-Dateien im Komponentenverzeichnis überein "vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // Stimmt mit Vue-Dateien in node_modules überein}
}

Die Konfigurationsregeln für uVIew ​​lauten wie folgt:
[Uview-Komponenten abgleichen, die mit u- beginnen, im Verzeichnis uview/components ]

{
	// Dies ist der Inhalt, der hinzugefügt werden muss "easycom": {
		"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
	},
	
	// Dies ist der vorhandene Inhalt "Seiten": [
		// ......
	]
}

Vorteile von easycom

1. Vereinfachen Sie die Verwendung von Komponenten und verbessern Sie die Entwicklungseffizienz
2. Unabhängig davon, wie viele Komponenten im Komponentenverzeichnis installiert sind, entfernt easycom nicht verwendete Komponenten nach dem Verpacken automatisch, was besonders nutzungsfreundlich für Komponentenbibliotheken ist.

Damit ist der Artikel über die praktischen Fähigkeiten abgeschlossen, die zum Aufrufen von UNI-APP-Komponenten in der Easycom-Modus-Entwicklung erlernt werden müssen. Weitere relevante Inhalte zu UNI-APP-Komponenten im Easycom-Modus 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!