Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die vue3.0-Projektarchitektur erstellen

Vorwort:

Ich habe die Bibliotheken vue-cli und vue-cli3 auf GitHub als Open Source bereitgestellt. Die Adresse des GitHub-Repositorys wird am Ende des Artikels angehängt. Dieses Mal habe ich 2.0 neu geschrieben und optimiert. Anschließend wurde es entsprechend den Funktionen und Codes von 2.0 und der Syntax von vue3.0 komplett neu geschrieben. Obwohl der Name „cli“ lautet, werden beide Bibliotheken tatsächlich auf Basis von vue-cli erstellt. Der Zweck dieser Vorgehensweise besteht darin, das Projekt schnell in Gang zu bringen. Schließlich sind Slicing und Packaging, Less, Axios, Vuex, Router, UI-Framework, grundlegendes Dateiverzeichnis, Berechtigungen allesamt grundlegende Vorgänge. Natürlich sind für verschiedene Projekte noch einige Anpassungen erforderlich. Die Master-Zweige dieser beiden Projekte sind die grundlegendsten und enthalten auch mehrere benutzerdefinierte Komponenten. vue-cli3 hat einen separaten App-Zweig erstellt. Dieser Zweig wird von Zeit zu Zeit einige Funktionen hinzufügen, wie z. B. das Gantt-Diagramm von hightCharts, three.js, benutzerdefinierte Großbildanzeige und andere Funktionen. Im Moment gibt es nichts, es hängt von der Zeit ab und wird aktualisiert, wenn Zeit ist. Vue3.0 wird zuerst geschrieben und 2.0 wird später besprochen. Ich hoffe auch, dass mir jeder helfen kann, diese Bibliothek zu verbessern. Schließlich ist sie darauf ausgelegt, das Projekt schnell zu starten. Je besser, desto besser. Der App-Zweig hofft außerdem, einige gute funktionale Modulfälle zu haben, um den Horizont aller zu erweitern.

1. Erstellen Sie ein Projekt mit vue-cli

npm uninstall vue-cli -g Deinstallieren Sie die alte Version von CLI
npm i @vue/cli -g installiere die neue Version von cli
npm install -g @vue/cli-init CLI installieren  
vue -V Überprüfen Sie die Versionsnummer der CLI, achten Sie auf Groß- und Kleinschreibung vue create vue-cli Erstellen Sie ein vue3.0-Projekt, denken Sie daran, vue3 auszuwählen

Befolgen Sie einfach die obigen Schritte. Meine Vue-CLI-Versionsnummer ist 4.5.11. Bitte beachten Sie, dass Sie beim Erstellen eines Projekts manuell auswählen müssen, ob Sie ein 2.0- oder 3.0-Projekt erstellen möchten. Die Standardeinstellung ist 2.0 und das Gerüst ist abwärtskompatibel.

2. Router installieren

npm install vue-router@4 Routing installieren, Version 4.0

Meine Router-Version ist 4.0.12

3. Verbessern Sie die Verzeichnisstruktur und erstellen Sie die Konfigurationsdatei vue.config.js

Das Verzeichnis und vue.config.js werden hier veröffentlicht. Weitere Informationen finden Sie auf GitHub, wo Sie den Quellcode direkt anzeigen können. Ich werde hier nicht viel Platz beanspruchen. Hier legt app.less die Farbvariablen fest, um die Farben des gesamten Systems zu vereinheitlichen. Dies erleichtert die Wartung, wenn Sie später ein Design erstellen. Unter ihnen werden Antd, Vuex usw. später besprochen.

4. Installieren Sie Ant-Design-Vue, installieren Sie weniger und installieren Sie Dayjs

npm i --save ant-design-vue@next Installieren Sie antd3.x Version 3.0 befindet sich noch in der Phase der kontinuierlichen Aktualisierung npm install babel-plugin-import --save-dev Importieren Sie babel, konfigurieren Sie die Datei babel.config und laden Sie Antd-Komponenten bei Bedarf npm install --save @ant-design/icons-vue Importieren Sie bei Bedarf das Antd-Symbol
npm install less --save Weniger importieren
npm i [email protected] Notieren Sie die Versionsnummer npm i style-resources-loader vue-cli-plugin-style-resources-loader -D Installieren Sie das Plugin, die Datei vue.config.js, fügen Sie die globale Konfiguration der Datei less hinzu, konfigurieren Sie hauptsächlich globale Variablen npm install dayjs --save und konfigurieren Sie dayjs global. Wenn ein Fehler auftritt, installieren Sie ant-design-vue neu. dayjs ist leichter als moment.

Ich habe Ant-Design-Vue als UI-Framework verwendet, Sie können es jedoch entsprechend Ihren Anforderungen und Vorlieben auswählen. Ich möchte Sie jedoch daran erinnern, dass die aktuelle Version 2.0 von antd vue3 unterstützt und stabil ist. Wir führen derzeit ein Upgrade auf Version 3.0 durch. Das Projekt verwendet die Schreibmethode 3.0 und seine Stabilität muss noch überprüft werden. Da Antd außerdem DayJS benötigt, wird hier auch DayJS verwendet. Die Verwendung ist ähnlich, kommt aber nur in sehr geringem Maße vor. Das Projekt verwendet das On-Demand-Laden von Antd. Es ist besser, keine nicht verwendeten Komponenten einzuführen. Führen Sie sie bei Bedarf einfach in der Datei antdUse.js ein. Die On-Demand-Lademethode wird in der offiziellen Dokumentation ausführlich beschrieben und erfordert eine Änderung von babel.config.js. Das Symbol von antd3 wird in Form von Komponenten eingeführt, was die Verwendung etwas umständlich macht und Aufmerksamkeit erfordert.

Achten Sie bei der Installation von Babel oder Less auf die Versionsnummer. Eine höhere Version führt zu einem Fehler. Ich habe hier eine globale Less-Variable definiert, um die Schriftgröße, Farben usw. auf allen Ebenen des Projekts zu vereinheitlichen

5. Installieren Sie vuex und axios

npm install vuex@next --save Installieren Sie vuex und konfigurieren Sie npm install axios Installieren Sie axios und nehmen Sie eine einheitliche Konfiguration vor

Es gibt keine Änderung in den Achsen. Vuex empfiehlt, einen genaueren Blick auf die offizielle Migrationsdokumentation von 3.0 auf 4.0 zu werfen. Hier liste ich kurz ein paar wichtige auf. In der neuen Version verwenden Sie createStore, um eine Instanz zu erstellen; holen Sie sich die aktuelle Vuex-Instanz über useStore. Informationen zu spezifischen Schreibmethoden finden Sie im Code.

6. Einige neue Syntax von vue3

Vue3 bezieht sich auf die Implementierungsmethode von React Hooks, daher sind der Schreibstil und die Programmierideen sehr ähnlich. Es wird dringend empfohlen, diesen Artikel von Herrn You Yuxi zu lesen. Klicken Sie hier, um zu springen. Er hat die Ursachen und Folgen seines Upgrades ausführlich erläutert. Nach der Lektüre werden Sie dieses Upgrade besser verstehen. Dieses Update nimmt hauptsächlich große Änderungen an der Extraktion und Wiederverwendung gemeinsamer Komponentenlogik und der logischen Organisation einer einzelnen Komponente vor. Die grundlegende treibende Kraft ist natürlich weiterhin die Unterstützung für TypeScript. Das ist der allgemeine Trend. Aus meiner persönlichen Sicht ist diese Änderung sehr groß und erschwert Anfängern den Einstieg in Vue3 erheblich. Auch die Anforderungen an Programmierer sind stark gestiegen. Es kann leicht zu einem Durcheinander im Code und einer verwirrenden Logik kommen. Äh... Außerdem ist das Schreiben von .value und props. zu wortreich. Bin ich zu anspruchsvoll? Ich bin so genervt, haha.

Bei häufigerem Gebrauch werden Sie es jedoch als sehr nützlich und praktisch empfinden. Der Datenfluss von vue3.0 ist sehr klar und behält auch den alten Vorteil der Datenreaktivität bei. Es ist sehr bequem. Der Blogger hat zunächst React verwendet und war zunächst nicht an Vue gewöhnt. Es gab Gründe für den Schreibstil, aber das größte Problem war, dass die Daten nicht klar waren. Alle Daten waren daran gebunden, was die Lesbarkeit erheblich beeinträchtigte.

. . . Kommen wir zum Thema zurück und sprechen darüber, welche Änderungen Vue3 vorgenommen hat und wie es nach meinem Verständnis zu verwenden ist.

Zunächst einmal unterstützt vue3 Typescript, Applaus und Flowers. . . Es wird empfohlen, es zu lernen, aber es spielt natürlich keine Rolle, ob Sie es verwenden oder nicht. Man kann nur sagen, dass ts als Obermenge von js die widerspenstige und freiheitsliebende Natur von js vollständig abgeschnitten und konventioneller gemacht hat. Darüber hinaus wird der Code dadurch standardisierter und kontrollierbarer. Interessant ist jedoch, dass vue3 die Regeln und Vorschriften von vue2 vollständig aufhebt und die Freiheit vollständig freigibt. Variablen und Methoden werden direkt im Setup definiert, und die Logik wird auch darin geschrieben. Es ist nicht mehr erforderlich, Überwachungseigenschaften und Deklarationsmethoden wie zuvor an der vorgeschriebenen Stelle zu deklarieren. Dieses Projekt ist in js geschrieben und mein TS-Niveau ist durchschnittlich. Ich befürchte auch, dass sich nicht jeder daran gewöhnt. Schließlich ist die Popularität von TS zu diesem Zeitpunkt noch etwas gering.

Einige Änderungen sind unten mit Quellcode und Kommentaren aufgeführt. Es ist besser, das Projekt einfach herunterzuladen und auszuführen. Hier werde ich nur kurz einige wichtige Änderungen erwähnen.

main.js-Datei. Erstellen Sie eine Vue-Instanz mit der Methode „createApp“ und fügen Sie dem Instanzprototyp über „app.config.globalProperties“ globale Eigenschaften hinzu. Es können mehrere Instanzen erstellt werden, ohne dass eine Verschmutzung befürchtet werden muss.

Datei report.js. Deklarieren Sie Komponenten über defineComponent und verwenden Sie die Setup-Funktion, um die Komponentenlogik zu entwickeln. Weitere Einzelheiten finden Sie in der Quelldatei report.js.

Die Kombinationsfunktion „Setup (Props, Kontext)“ ersetzt direkt den gesamten Satz von Schreibmethoden, wie z. B. die berechneten Methoden des Überwachungslebenszyklus von vue2.0. Die gesamte Logik ist in dieser Funktion implementiert. Daher wird empfohlen, den Schreibstil zu vereinheitlichen. Obwohl der vorherige Schreibstil ebenfalls unterstützt wird, ist mein persönlicher Vorschlag, entweder den vorherigen Stil zu verwenden oder ihn überhaupt nicht zu verwenden. Lassen Sie nicht zu, dass Setup und Methoden gleichzeitig angezeigt werden.

1. „setup beforeCreate“ und „created“ werden nicht mehr benötigt und „setup“ wird tatsächlich vor „beforeCreate“ ausgelöst. Es wird nur einmal ausgeführt, wenn die Instanz initialisiert wird, und wird nicht erneut ausgeführt. Das Setup ist synchron.
2. Zwei Parameter, Props sind die von der übergeordneten Komponente übergebenen Daten, die in Echtzeit aktualisiert werden. Kann nicht dekonstruiert werden, die Überwachung geht verloren. Sie können Torefs verwenden, um Props in Überwachungsdaten innerhalb der Komponente umzuwandeln. Ich persönlich bin jedoch der Meinung, dass dies keine gute Methode ist. Ich bevorzuge es immer noch, es in Form von Requisiten zu verwenden. Auf diese Weise ist der Code auf einen Blick klar und es ist klar, ob die von Ihnen verwendeten Daten von Requisiten übergeben oder von der aktuellen Komponente deklariert werden. Der Datenfluss ist sehr klar; Kontext ist ein Objekt, das dekonstruiert und verwendet werden kann und Eigenschaften wie „Emit“ enthält. Es gibt nicht viel zu sagen, lesen Sie einfach die Dokumentation.
3. setupthis ist nutzlos, da es noch nicht zurückgekehrt ist. Daher wurden für jedes abhängige Paket entsprechende Updates vorgenommen, um diese Funktion zu unterstützen. Router vuex verfügt über eine spezielle Methode, um die Instanz durch Einführung abzurufen. Sie können sich den Code in der folgenden Abbildung ansehen.
4. Berechnete Eigenschaften, überwachte Eigenschaften und Lebenszyklus. Diese werden alle in Form von Methoden in die Komponente eingefügt. Die Namen der Lebenszyklen haben sich ein wenig geändert, aber die Funktionen haben sich nicht geändert. Dasselbe gilt für die Abhöreigenschaften, aber die Schreibmethode hat sich geändert. Das Dokument ist sehr klar, deshalb werde ich hier nicht ins Detail gehen. Zweitens wurden einige neue APIs hinzugefügt. ref reactive deklariert responsive Variablen; provide / inject übergeordnete und untergeordnete Komponenten kommunizieren miteinander; watchEffect überwacht automatisch, was nicht empfohlen wird. Es überwacht automatisch alle responsiven Variablen und jede Änderung löst einen Rückruf aus, der update etwas ähnelt. Natürlich wird es bei häufiger Ausführung auch zu Problemen führen. Es kann für einige einfache Seiten verwendet werden, in anderen Fällen ist es jedoch besser, mit watch die Variablen manuell zu markieren, die überwacht werden müssen.

VII. Fazit

Es gibt viele neue Eigenschaften in Vue3, studieren und lesen Sie daher bitte die Dokumentation. Allerdings ist die Community noch nicht sehr vollständig. Ich persönlich bin der Meinung, dass sie bis Ende 2022 stark verbessert sein sollte und die meisten Abhängigkeiten unterstützt werden.

Und schließlich: Wenn Sie meinen, dass dieses Projekt gut geschrieben ist, geben Sie ihm bitte einen Stern. Wenn es Probleme mit dem Code gibt, hoffe ich, dass Sie sie beheben können. Wenn Sie gute Komponenten oder Effekte haben, teilen Sie sie uns bitte mit. Nur für den Fall, dass das Projekt es braucht, werde ich es verwenden, haha.

Vue-CLI-Adresse

Vue-CLI3-Adresse

Damit schließen wir diesen Artikel zum Erstellen einer Vue 3.0-Projektarchitektur ab. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.