Es gibt viele Gründe für die zunehmende Beliebtheit von Vue. Dies beinhaltet die Einfachheit des Frameworks, die einfache Integration in bestehende Projekte, die Bequemlichkeit der Arbeit damit und nicht zu starke Einschränkungen für Vue-Anwendungen. All dies hilft Vue auch dabei, mit Angular and React zu konkurrieren. Tatsächlich scheint Vue in vielerlei Hinsicht anderen gängigen Frameworks und Bibliotheken ebenbürtig zu sein.
Ich beschloss herauszufinden, was sie über die Mängel von Vue schreiben. Bei der Suche nach relevanten Materialien habe ich festgestellt, dass Vue überall nicht gut genug für die Entwicklung von Großprojekten ist. Wenn ich Vue kenne, kann ich zuversichtlich sagen, dass dies nicht wahr ist. In diesem Beitrag möchte ich Sie auf 4 detaillierte Richtlinien für die Entwicklung großer Vue-Projekte aufmerksam machen.
1. Verwenden Sie Vue-Slots, um Ihren Code klarer zu gestalten
Beim Einrichten von Komponentenbeziehungen wird am häufigsten das Eltern-Kind-Modell verwendet. In einigen Situationen ist ein solches Modell jedoch bei weitem nicht das erfolgreichste. Stellen Sie sich vor, Sie haben eine einzelne übergeordnete Komponente, die eine große Anzahl untergeordneter Komponenten hostet. Dies bedeutet, dass Sie eine große Anzahl von Eingabeparametern (Requisiten) verwenden und viele Ereignisse generieren müssen, um die Interaktion von Komponenten herzustellen. Unter solchen Bedingungen wird der Code sehr schnell unordentlich. Dies sind die Situationen, mit denen Entwickler von Großprojekten konfrontiert sind. Vue verfügt jedoch über Mechanismen, die speziell für diese Art von Problemen entwickelt wurden.
Wir sprechen über Slots. Sie werden verwendet, um eine alternative Art der Darstellung von Eltern-Kind-Beziehungen bereitzustellen. Slots, nämlich Elemente
<slot>, geben dem Entwickler die Möglichkeit, den Code neu zu organisieren. Hier ist ein einfaches Beispiel für die Verwendung eines Steckplatzes:
<div class="demo-content">
<slot></slot>
</div>
Wenn eine solche Komponente gerendert wird, wird ihr Tag
<slot></slot>durch den Inhalt des Tags ersetzt <demo-content>:
<demo-content>
<h2><font color="#3AC1EF">Hi!</font></h2>
<class-name name="Welcome to Vue!"></class-name>
</demo-content>
Es gibt viele Arten von Slots, die in Vue-Projekten verwendet werden können. Das Wichtigste, was Sie über Slots wissen müssen, ist, dass ihre Verwendung einen enormen Einfluss auf ein wachsendes Projekt haben kann. Sie halten Ihren Projektcode in gutem Zustand und helfen Ihnen, sauberen Code zu erstellen.
2. Erstellen Sie unabhängige Komponenten und verwenden Sie sie erneut
Befolgen Sie beim Entwerfen von Komponenten das ERSTE Prinzip, indem Sie Komponenten fokussiert, unabhängig, wiederverwendbar, klein und testbar machen.
Tatsächlich besteht das Geheimnis für das effektive Entwerfen "großer" Systeme nicht darin, überhaupt zu versuchen, diese Systeme zu erstellen. Stattdessen müssen diese Systeme aus kleineren Teilen zusammengesetzt werden, die hochspezialisierte Probleme lösen. Dies erleichtert die Beurteilung, wie die kleineren Teile der Systeme in ihre „größeren“ Ziele passen.
Eddie Osmani
Sie können spezielle Systeme wie Bit verwenden , um Komponenten zu erstellen und zu verwalten . Hier ist das Zeug dazu.
3. Halten Sie Ihren Vuex-Shop gut organisiert
Vuex ist ein Vue-Anwendungsstatusverwaltungsmuster und eine Bibliothek. Mit Vuex können Sie einen zentralen Datenspeicher für alle Anwendungskomponenten organisieren. Ich habe Kommentare zu Vuex gesehen, die besagen, dass Vuex die Fähigkeit von Entwicklern, ein Projekt zu strukturieren, einschränkt und sie daran hindert, das zu tun, was sie tun müssen. Ich stimme solchen Aussagen nicht zu. Vuex hilft Entwicklern, die eine Reihe von Prinzipien befolgen, bei der Strukturierung ihrer Projekte, um sie besser zu organisieren.
Bevor ich über diese Prinzipien spreche, möchte ich über 4 Hauptkomponenten von Vuex-Repositorys sprechen, über die jeder, der solche Repositorys effektiv nutzen möchte, Bescheid wissen muss. Wenn Sie mit diesen Komponenten vertraut sind, können Sie Ihren Vuex-Shop problemlos strukturieren und die Projektorganisation verbessern. Hier ist eine kurze Beschreibung:
- Status: Wird zum Speichern von Anwendungsdaten verwendet.
- Getter: Dient zum Organisieren des Zugriffs auf Statusobjekte außerhalb des Speichers.
- Mutationen: erforderlich, um Statusobjekte zu ändern.
- Aktionen: Zum Anwenden von Mutationen.
Angenommen, Sie sind mit diesen Komponenten vertraut, lassen Sie uns über die oben genannten Prinzipien sprechen:
- Der Status der Anwendungsschicht muss zentral verwaltet werden, indem sie im Repository abgelegt wird.
- Zustandsänderungen müssen immer mit Mutationen vorgenommen werden.
- Asynchrone Logik muss gekapselt sein und darf nur durch Aktionen auf den Status einwirken.
Wenn Sie diese drei Prinzipien einhalten können, bedeutet dies, dass Sie das Projekt gut strukturieren können. Wenn Sie im Verlauf des Projektwachstums entscheiden, dass der Code der entsprechenden Vuex-Komponenten in verschiedenen Dateien abgelegt werden muss, können Sie dies problemlos tun. Unten finden Sie ein Beispiel für eine Projektstruktur mit Vuex:
├── index.html
├── main.js
├── api
├── components
└── store
├── index.js
├── actions.js
├── mutations.js
└── modules
▍Vuex modulare Speicherorganisation
In diesem Artikel sprechen wir über Großprojekte. Es ist zu erwarten, dass diese Projekte sehr große und komplexe Dateien verwenden. Programmierer, die solche Projekte erstellen, benötigen Speicherverwaltungsmechanismen, die ihren Anforderungen entsprechen. Gleichzeitig sollte die Speicherstruktur nicht unnötig kompliziert sein. Daher wird empfohlen, dass Sie Ihre Vuex-Filialen modular organisieren und sie entsprechend Ihrer Vision der besten Struktur für solche Filialen anpassen. Es gibt keine definitive Möglichkeit, Speicher in Module zu unterteilen. Einige Entwickler verfolgen einen auf Entwurfsfähigkeiten basierenden Ansatz, andere einen Datenmodellansatz. Die endgültige Entscheidung über die Aufteilung des Speichers in Module trifft der für das Projekt verantwortliche Programmierer.Ein angemessen strukturierter Speicher wirkt sich langfristig positiv auf die Benutzerfreundlichkeit eines Projekts aus.
Hier ist ein Beispiel für einen modularen Ansatz zur Strukturierung des Speichers:
store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
▍Verwenden von Hilfsmethoden
Oben habe ich über 4 Komponenten gesprochen, die in Vuex-Repositorys verwendet werden. Stellen Sie sich eine Situation vor, in der Sie auf Status zugreifen und mit Gettern arbeiten müssen, wenn Sie Aktionen und Mutationen in Komponenten aufrufen müssen. In solchen Fällen müssen Sie nicht viele Methoden oder berechnete Eigenschaften erstellen. Sie können einfach eine Hilfsmethode (Verwendung
mapState, mapGetters, mapMutationsund mapActions), deren Verwendung übermäßig den Code Volumen erhöht würde vermeiden. Lassen Sie uns über die Verwendung dieser Hilfsmethoden sprechen.
▍mapState
Wenn eine Komponente auf mehrere Speichereigenschaften oder mehrere Getter zugreifen muss, bedeutet dies, dass wir eine Hilfsmethode verwenden können
mapState, um eine Getter-Funktion zu generieren. Dies erspart uns das Schreiben relativ großer Codemengen.
import { mapState } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
▍mapGetters
Die Hilfsmethode wird
mapGettersverwendet, um die Zuordnung von Speicher-Gettern zu lokal berechneten Eigenschaften zu konfigurieren.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
▍mapMutations
Die Hilfsmethode wird
mapMutationsin Komponenten verwendet, um Mutationen anzuwenden. Es definiert die Entsprechung zwischen Komponentenmethoden und Aufrufen store.commit. Darüber hinaus können mit dieser Methode einige Daten in den Speicher übertragen werden.
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
cal: 'calculate' // `this.cal()` `this.$store.commit('calculate')`
})
}
}
▍mapActions
In
mapActionsKomponenten wird eine Hilfsmethode zum Versenden von Aktionen verwendet. Es definiert die Entsprechung zwischen Komponentenmethoden und Aufrufen store.dispatch.
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions({
cal: 'calculate' // `this.cal()` `this.$store.dispatch('calculate')`
})
}
}
4. Unit-Tests nicht vergessen
Testen ist ein weiterer wichtiger Aspekt jedes Projekts. Entwickler sollten testen, was sie erstellen, unabhängig von der Wichtigkeit und Größe der Projekte. Dies gilt insbesondere für Großprojekte mit Hunderten oder sogar Tausenden kleiner Funktionen. Unsere Aufgabe ist es, jeden von ihnen zu testen. Unit-Tests helfen, dieses Problem zu lösen. Sie ermöglichen es dem Programmierer, einzelne Codemodule zu testen. Mit solchen Tests können Sie nicht nur Fehler identifizieren und beseitigen. Sie erhöhen auch das Vertrauen des Programmierers oder des Programmierteams in die Richtigkeit ihrer Aktionen, wenn Änderungen am vorhandenen Code vorgenommen werden. Wenn das Projekt im Laufe der Zeit wächst, können Entwickler dank der Verwendung von Komponententests sicher neue Funktionen hinzufügen und haben gleichzeitig keine Angst davordass Innovationen die Arbeit bestehender Mechanismen stören werden. Alles, was Sie tun müssen, ist, von Anfang an die Praxis des Schreibens von Komponententests zu befolgen.
Wenn wir über Komponententests sprechen, die in Projekten verwendet werden, die auf Vue basieren, können wir sagen, dass solche Tests fast identisch mit denen sind, die in Projekten verwendet werden, die auf anderen Frameworks und Bibliotheken basieren. Jest , Karma oder Mocha arbeiten nämlich gut mit Vue zusammen . Unabhängig davon, für welches Framework Sie Ihre Tests erstellen, sollten Sie bei der Entwicklung von Komponententests einige allgemeine Richtlinien beachten:
- Wenn der Test fehlschlägt, sollten eindeutige Fehlermeldungen angezeigt werden.
- Es wird empfohlen, beim Erstellen von Tests gute Assertionsbibliotheken zu verwenden. (Zum Beispiel sind die Mechanismen zum Generieren von Ansprüchen in Jest integriert, und bei Mocha wird die Chai-Bibliothek verwendet.)
- Unit-Tests sollten alle Vue-Komponenten abdecken.
Wenn Sie diese Empfehlungen von Anfang an befolgen, wird sich mit dem Wachstum des Projekts der Zeitaufwand für das Debuggen des Codes und das manuelle Testen erheblich verringern.
Vue-Projekte können zusätzlich zu Unit-Tests End-to-End- und Integrationstests unterzogen werden. Die Situation hier ist, wie im Fall von Unit-Tests, auch der Situation mit anderen Frameworks und Bibliotheken sehr ähnlich. Daher wird empfohlen, in Projekte und ähnliche Tests einzubeziehen. In der Regel wird der Routing-Teil eines Projekts nicht mit Komponententests getestet. Hier werden End-to-End-Tests verwendet. Das Testen des Vue-Stores ist die größte Herausforderung. Es wird empfohlen, Integrationstests zum Testen zu verwenden, da es als Zeitverschwendung angesehen wird, Zustände, Aktionen oder Getter separat zu testen.
Ergebnis
Nachdem ich in diesem Beitrag die technischen Möglichkeiten von Vue.js überprüft habe, habe ich meine Überzeugung gestärkt, dass dieses Framework für die Entwicklung von Großprojekten geeignet ist. Mit seiner Hilfe können Sie wie bei anderen Frameworks und Bibliotheken solche Projekte erstellen und verwalten, um sie in gutem Zustand zu halten.
Denken Sie, dass Vue für die Entwicklung von Großprojekten geeignet ist?
