Zusammenfassung der wichtigsten Erkenntnisse des Vue-Entwicklungshandbuchs

Überblick

Wenn Sie neu in der Vue-Entwicklung sind, haben Sie möglicherweise viele Fachbegriffe dazu gehört, wie z. B.: Single-Page-Anwendung, asynchrone Komponenten, serverseitiges Rendering usw.

Möglicherweise werden auch Tools und Bibliotheken oft in Verbindung mit Vue erwähnt, z. B. Vuex, Webpack, Vue CLI und Nuxt.

Vielleicht fühlen Sie sich hilflos und hoffnungslos angesichts dieser unbekannten Begriffe und Tools. Das macht nichts, Sie sind nicht allein, denn dieses Gefühl haben alle Neulinge, wenn sie zum ersten Mal mit Vue in Berührung kommen.

Wenn Sie jedoch versuchen, sie alle auf einmal zu beherrschen, können diese massiven Systeme Sie leicht überfordern. Zu diesem Zweck stelle ich Ihnen hier einen „Wissensgraphen“ vor, der alle wichtigen Bestandteile des professionellen Vue-Entwicklungsprozesses enthält. Dieses Diagramm kann Ihnen als Leitfaden für das Erlernen von Vue im Jahr 2019 dienen.

0. Grundlagen von JavaScript und Webentwicklung

Wenn ich Sie auffordere, reine englische Bücher auf Englisch zu lesen, sollten Sie zuerst Englisch lernen, richtig?

Ebenso ist Vue ein JavaScript-Framework zum Erstellen von Web-Benutzeroberflächen. Bevor Sie Vue verwenden, müssen Sie zumindest über Grundkenntnisse in JavaScript und Webentwicklung verfügen.

1. Grundkonzepte von Vue

Wenn Sie ein neuer Vue-Entwickler sind, sollten Sie sich auf den Kern des Vue.js-Ökosystems konzentrieren, der die Vue-Kernbibliothek, Vue Router und Vuex umfasst. Weil diese Tools in den meisten Vue-Anwendungen verwendet werden. Okay, beginnen wir mit der Einführung einiger grundlegender Konzepte zu Vue.

Kernfunktionen von Vue

In seiner einfachsten Form hält Vue Webseiten und JavaScript synchron. Die Funktionen, die dies ermöglichen, sind reaktionsfähige Daten und Vorlagenfunktionen wie Anweisungen und Interpolation, die Sie am ersten Tag kennenlernen werden.

Bevor Sie Ihre erste Vue-Anwendung erstellen, müssen Sie auch verstehen, wie Sie Vue auf einer Webseite installieren/verwenden und den Lebenszyklus von Vue-Referenzinstanzen verstehen.

Komponenten

Vue-Komponenten sind wiederverwendbare und unabhängige UI-Elemente. Sie müssen verstehen, wie Komponenten deklariert werden und wie Sie Komponenten über Eigenschaften und Ereignisse miteinander kommunizieren lassen.

Und das Erlernen der Kombination von Komponenten ist ebenso wichtig, da davon abhängt, ob Sie mit Vue eine robuste und skalierbare Anwendung erstellen können.

Einzelseitenanwendung

Die Architektur einer Single-Page-Anwendung (SPA) sorgt dafür, dass die von Ihnen erstellten Webseiten dieselben umfangreichen Inhalte anzeigen können wie mehrseitige Webseiten, ohne dass ineffizientes Verhalten auftritt, wie etwa das Neuladen der gesamten Seite, nachdem der Benutzer auf einen Link geklickt hat.

Sobald Sie Ihre „Seiten“ als Vue-Komponenten erstellt haben, können Sie Vue Router für jede Komponente verwenden, um jede Anforderung einem eindeutigen Zugriffspfad zuzuordnen. Vue Router ist ein vom Vue-Team verwaltetes Tool zum Erstellen von Single-Page-Anwendungen (SPAs).

Zustandsverwaltung

Mit zunehmendem Projektumfang gibt es immer mehr Komponenten auf vielen Seiten der SPA, und die Verwaltung des globalen Status wird immer schwieriger. Komponenten werden durch eine große Anzahl von Eigenschaften und Ereignislistenern aufgebläht.

Ein spezieller Modus namens „Flux“ hält Ihre Daten in einem stabilen zentralen Speicher. Die Vuex-Bibliothek wird ebenfalls vom Vue-Team gepflegt und hilft Ihnen bei der Implementierung von Flux in Ihren Vue.js-Anwendungen.

2. Vue in der Produktion

Das gesamte Wissen, das Sie in Teil 1 erworben haben, kann zum Erstellen leistungsfähiger und effizienter Vue-Anwendungen verwendet werden, allerdings auf Ihrem lokalen Server. Wie stellen Sie also sicher, dass sie in einer tatsächlichen Produktionsumgebung ausgeführt werden können?

Wenn Sie Benutzern Vue.js-basierte Produkte anbieten möchten, müssen Sie mehr wissen. Im Folgenden erfahren Sie mehr darüber.

Projektgerüst

Wenn Sie häufig Vue-Anwendungen erstellen müssen, werden Sie feststellen, dass fast jedes Projekt Konfigurations-, Einrichtungs- und Entwicklertools bereitstellt.

Das Vue-Team pflegt ein Tool namens Vue CLI, mit dem Sie in nur wenigen Minuten eine leistungsstarke Vue-Entwicklungsumgebung erstellen können.

Full Stack / Authentifizierungsanwendung

Vue-Anwendungen sind normalerweise datengesteuerte Benutzeroberflächen und Daten werden normalerweise von Node, Laravel, Rails, Django usw. generiert.

Oder andere Server-Frameworks, die in einer sicheren API als Quelle geschrieben sind.

Möglicherweise werden die Daten von einer herkömmlichen REST-API oder GraphQL bereitgestellt, oder es handelt sich um Echtzeitdaten, die von einem WebSocket bereitgestellt werden.

Sie sollten außerdem mit den Entwurfsmustern vertraut sein, die häufig zur Integration von Vue in eine Full-Stack-Konfiguration verwendet werden, sowie mit den verschiedenen Überlegungen zum Schutz der Benutzerdaten in Vue-Anwendungen.

Wenn Sie prüfen, welches Backend-Produkt die beste Wahl für Ihre Vue-Anwendungsentwicklung ist, sollte dieser Artikel Ihre Antwort enthalten.

prüfen

Wenn Sie sicherstellen möchten, dass Ihre Vue-Anwendung in der Produktion wartbar und stabil ist, müssen Sie vollständige Tests für Ihre Anwendung bereitstellen.

In einer Vue-Anwendung wird durch Unit-Tests sichergestellt, dass Ihre Komponenten für eine bestimmte Eingabe (Eigenschaften oder Benutzereingabe) immer dieselben Eigenschaften (gerendertes HTML oder Ereignisse) bereitstellen.

Das Vue-Team pflegt ein Tool namens Vue Test Utils, mit dem Sie Tests für einzelne Komponenten erstellen und ausführen können.

Optimierung

Nachdem Sie Ihre Anwendung auf einem Remoteserver bereitgestellt haben, sind Zugriffsgeschwindigkeit und Ausführungseffizienz der Anwendung möglicherweise nicht mehr so ​​hoch wie während der Entwicklungsphase und es ist wahrscheinlich, dass die Geschwindigkeit beim Zugriff der Benutzer sehr langsam ist.

Um die Effizienz zu verbessern, müssen wir Ihre Vue-Anwendung optimieren. Im Optimierungsprozess können wir verschiedene Technologien verwenden, darunter serverseitiges Rendering. Beim serverseitigen Rendering wird das Vue-Programm auf dem Server ausgeführt, und wenn der Benutzer darauf zugreift, wird dem Benutzer das gerenderte HTML angezeigt, wodurch die Zugriffsgeschwindigkeit verbessert wird.

Natürlich sind auch andere Optimierungstechniken enthalten, wie etwa asynchrone Komponenten und Renderfunktionen.

3. Wichtige Werkzeuge

Alles, was wir bisher gesehen haben, stammt aus dem Vue.js-Kern oder von Tools im Ökosystem. Aber Vue existiert nicht isoliert, sondern ist lediglich ein Teil des Front-End-Technologie-Stacks.

Fortgeschrittene Entwickler sollten nicht nur mit Vue vertraut sein, sondern auch mit einigen anderen wichtigen Tools, da diese Teil der zukünftigen Vue-Anwendung werden können.

Modernes JavaScript und Babel

Vue-Anwendungen können effektiv mit ES5 erstellt werden, einem JavaScript-Standard, der von fast allen Browsern unterstützt wird.

Um Ihre Vue-Entwicklungserfahrung zu verbessern und die neuesten Browserfunktionen zu nutzen, können Sie das neueste JavaScript verwenden

Erstellen Sie Ihre Vue-Anwendungen mit Standardfunktionen von ES2015 oder vorgeschlagenen Funktionen für ES2016 und höher.

Wenn Sie sich für die Verwendung der neuesten JavaScript-Funktionen entscheiden, treten Kompatibilitätsprobleme mit älteren Browsern auf, was dazu führen wird, dass Ihr Produkt einige Benutzer verliert.

Wie kann man es mit alten Browsern kompatibel machen? Babel kann dieses Ziel erreichen. Seine Aufgabe besteht darin, die modernen Funktionen Ihrer Anwendung vor der Veröffentlichung in Standardfunktionen zu „transformieren“ (übersetzen und kompilieren).

Webpack

Webpack ist ein Modulbündeler. Das bedeutet, wenn Ihr Code in verschiedenen Modulen geschrieben ist (z. B. in verschiedenen JavaScript-Dateien), kann Webpack alle diese Inhalte auch in einer einzigen Datei „zusammenfassen“, die vom Browser gelesen werden kann.

Webpack kann auch Pipelines erstellen, mit denen Sie Ihren Code vor dem Erstellen transformieren können. Wenn Sie beispielsweise Babel, Sass oder TypeScript mit Frontend verwenden, stehen Ihnen auch eine Reihe von Plugins zur Optimierung Ihrer Anwendung zur Verfügung.

Viele Entwickler finden es schwierig, Webpack zu verstehen und zu konfigurieren, aber ohne es wären einige der besten Funktionen von Vue (wie Einzelseitenkomponenten) nicht möglich. Wir bieten eine Reihe von Tutorials zu WebPack an, mit denen Sie die Verwendung und Konfiguration von Webpack schnell meistern können.

Typoskript

TypeScript ist eine Obermenge der JavaScript-Sprache, die (String, Boolean, Number usw.) umfasst. Mit solchen Typdefinitionen stellen Sie sicher, dass Sie während der Entwicklung robusten und stabilen Code schreiben können und Fehler möglichst frühzeitig erkennen.

Vue.js 3, das 2019 erscheint, wird vollständig in TypeScript entwickelt. Das bedeutet aber nicht, dass Sie es in Ihren Vue-Projekten verwenden müssen. Wenn Sie jedoch zu Vue beitragen möchten, indem Sie den internen Code lesen und der Open-Source-Organisation von Vue beitreten, sollten Sie zumindest die Sprache TypeScript verstehen.

4. Vue-Framework

Ein auf Vue basierendes Framework erspart Ihnen die Implementierung des serverseitigen Renderings von Grund auf, die Erstellung Ihrer eigenen Komponentenbibliothek und ähnliche Arbeiten.

Es stehen viele hervorragende Vue-Frameworks zur Verfügung. Hier listen wir jedoch nur die drei in verschiedenen Bereichen am häufigsten verwendeten Frameworks auf.

Nuxt.js

Wenn Sie eine leistungsstarke Vue-Anwendung basierend auf Routing, serverseitigem Rendering, Code-Trennung und anderen hochmodernen Funktionen erstellen möchten und außerdem einige erweiterte Funktionen wie SEO-Tags usw. benötigen. Sie können das Nuxt.js-Framework verwenden.

Das Nuxt.js-Framework bietet all diese Funktionen sofort einsatzbereit und über seine umfangreichen Community-Plugins weitere wie PWA usw.

Vuetify

Der Material Design-Standard von Google ist ein weit verbreitetes Leitfadensystem für die Designsprache zum Erstellen schöner und sinnvoller Benutzeroberflächen, die in Google-Produkten wie Android und Websystemen häufig verwendet werden.

Das Vuetify-Framework implementiert Material Design in einer Reihe von Vue-Komponenten. Auf diese Weise können Sie schnell Vue-Anwendungen mithilfe von Material Design-Layouts und -Stilen erstellen und Seiten-Widgets wie Modalboxen, Eingabeaufforderungsboxen, Navigationsleisten, Seitenumbrüche usw. in Ihre Anwendung implementieren.

NativeScript-Vue

Vue.js ist eine Bibliothek zum Erstellen von Web-Benutzeroberflächen. Wenn Sie es zum Erstellen mobiler Apps verwenden möchten, können Sie das NativeScript-Vue-Framework verwenden.

NativeScript ist ein Framework zum Erstellen von Apps mit nativen Benutzeroberflächenkomponenten unter iOS und Android, während NativeScript-Vues ein auf NativeScript basierendes Framework ist, das die Vue-Syntax und die Verwendung von Vue-Komponenten unterstützt.

5. Sonstiges

In diesem letzten Abschnitt behandeln wir einige wichtige Dinge, die nicht in den oben genannten Kategorien enthalten sind.

Plugin-Entwicklung

Wenn Sie Vue-Funktionen in Ihrem Projekt wiederverwenden oder zum Vue-Ökosystem beitragen möchten, können Sie diese Funktionen in Plug-Ins packen und für andere Benutzer veröffentlichen.

Die Plugin-Funktionalität ist ein wichtiges Merkmal von Vue und es gibt viele Tools und Vorlagen, die Ihnen bei der Erstellung von leichtem und effizientem Vue-Code helfen.

Animation

Animation ist auch Teil der Kernfunktionalität von Vue, die es Ihnen ermöglicht, Animationen anzuwenden, wenn Sie Elemente zum DOM hinzufügen oder daraus entfernen. Um eine Animation zu ermöglichen, erstellen Sie CSS-Klassen, die den gewünschten Animationseffekt definieren, sei es Ein- und Ausblenden, Farbwechsel oder ein anderer Effekt. Vue erkennt, wenn Elemente hinzugefügt und entfernt werden, und fügt die von Ihnen festgelegten Klassen entsprechend hinzu oder entfernt sie.

Progressive Web Apps

Progressive Web Applications (PWAs) ähneln normalen Webanwendungen, aber das Benutzererlebnis und die Leistung wurden verbessert und moderne Funktionen hinzugefügt. PWAs umfassen beispielsweise Offline-Caching, serverseitiges Rendering, Push-Benachrichtigungen usw.

Die meisten PWA-Funktionen können Vue-Apps problemlos über Vue CLI 3-Plugins oder mithilfe eines Frameworks wie Nuxt.js hinzugefügt werden. Sie müssen sich jedoch dennoch mit wichtigen Technologien wie JSON-Manifesten (Minifesten) und Diensten für Web-Apps vertraut machen.

Oben finden Sie den detaillierten Inhalt des Schlüsselwissens des Vue-Entwicklungshandbuchs. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!