Vue lernen

Kapitel 1. Willkommen in der Vue.js-Welt!

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Vue.js wurde erstmals 2014 veröffentlicht und hat vor allem im Jahr 2018 eine rasante Verbreitung erfahren. Vue ist dank seiner Benutzerfreundlichkeit und Flexibilität ein beliebtes Framework in der Entwicklergemeinschaft. Wenn du auf der Suche nach einem großartigen Werkzeug bist, um exzellente, performante Webanwendungen zu erstellen und an Endbenutzer zu liefern, ist Vue.js die Antwort .

Dieses Kapitel stellt die Kernkonzepte von Vue.js vor und führt dich durch die Werkzeuge, die du für deine Vue.js-Entwicklungsumgebung brauchst. Außerdem werden hilfreiche Tools vorgestellt, die deinen Vue.js-Entwicklungsprozess überschaubarer machen. Am Ende des Kapitels wirst du eine Arbeitsumgebung mit einer einfachen Vue.js-Anwendung haben, mit der du deine Reise zum Erlernen von Vue.js beginnen kannst.

Was ist Vue.js?

Vue.js ist eine JavaScript-Engine zur Erstellung von progressiven, komponierbaren und reaktiven Benutzeroberflächen (UI) in Frontend-Anwendungen.

Hinweis

Von nun an werden wir den Begriff Vue für Vue.js verwenden.

Vue ist auf JavaScript aufgesetzt und bietet einen organisierten Mechanismus zur Strukturierung und Erstellung einer Webanwendung . Sie fungiert auch als Trans-Compiler(Transpiler), der den Vue-Code (als Single File Component, auf die wir im Abschnitt "Vue Single File Component Structure" näher eingehen werden ) in äquivalenten HTML-, CSS- und JavaScript-Code zur Build-Zeit kompiliert und übersetzt, bevor er bereitgestellt wird. Im Standalone-Modus (mit einer generierten Skriptdatei) führt die Vue-Engine die Codeübersetzung stattdessen zur Laufzeit durch.

Vue folgt dem MVVM-Muster(Model-View-ViewModel). Im Gegensatz zu MVC (Model-View-Controller),¹ ist das ViewModel der Binder, der die Daten zwischen View und Model bindet. Indem die direkte Kommunikation zwischen View und Model ermöglicht wird, wird die Reaktivität der Komponente schrittweise erhöht .

Kurz gesagt, Vue wurde entwickelt, um sich nur auf die View-Schicht zu konzentrieren, ist aber schrittweise anpassbar, um andere externe Bibliotheken für komplexere Anwendungen zu integrieren.

Da sich Vue ausschließlich auf die View-Schicht konzentriert, ermöglicht es die Entwicklung von Single-Page-Anwendungen (SPAs). SPAs können sich schnell und flüssig bewegen und dabei kontinuierlich Daten mit dem Backend austauschen.

Die offizielle Website für Vue enthält die API-Dokumentation, die Installation und die wichtigsten Anwendungsfälle als Referenz.

Die Vorteile von Vue in der modernen Webentwicklung

Ein großer Vorteil von Vue ist seine gut geschriebene, leicht verständliche Dokumentation. Außerdem helfen das Ökosystem und die unterstützende Community rund um Vue, wie Vue Router, Vuex und Pinia, Entwicklern dabei, ihre Projekte mit minimalem Aufwand einzurichten und zu betreiben.

Die Vue-APIs sind einfach und jedem vertraut, der bereits mit AngularJS oder jQuery gearbeitet hat. Die leistungsstarke Templating-Syntax minimiert den Lernaufwand und macht es einfacher, mit Daten zu arbeiten oder auf Document Object Model (DOM)-Ereignisse in deiner Anwendung zu reagieren.

Ein weiterer wichtiger Vorteil von Vue ist seine Größe. Die Größe eines Frameworks ist ein wesentlicher Aspekt für die Leistung der Anwendung, insbesondere die anfängliche Ladezeit bei der Auslieferung. Zum Zeitpunkt der Erstellung dieses Artikels ist Vue das schnellste und leichteste Framework (~10kB groß). Dieser Vorteil führt zu weniger zeitaufwändigem Herunterladen und einer besseren Laufzeitleistung aus Sicht des Browsers.

Mit der Veröffentlichung von Vue 3 bietet die eingebaute Unterstützung für TypeScript Entwicklern nun den Vorteil, dass sie Typen eingeben können und ihre Codebasis langfristig lesbarer, organisierter und wartbarer wird.

Node.js installieren

Die Arbeit mit Vue erfordert die Einrichtung des Entwicklungs-Ökosystems und vorherige Programmierkenntnisse, um mit dem Lernprozess Schritt zu halten. Node.js und NPM (oder Yarn) sind notwendige Entwicklungswerkzeuge, die du installieren musst, bevor du mit der Arbeit an einer Anwendung beginnst.

Node.js (oder Node) ist eine Open-Source-JavaScript-Serverumgebung, die auf der V8-JavaScript-Laufzeit-Engine von Chrome basiert. Node ermöglicht es Entwicklern, JavaScript-Anwendungen lokal oder auf einem gehosteten Server außerhalb eines Browsers zu programmieren und auszuführen.

Hinweis

Chromium-basierte Browser wie Chrome und Edge nutzen ebenfalls die V8-Engine, um JavaScript-Code in effizienten Low-Level-Computercode zu interpretieren und auszuführen.

Node wird plattformübergreifend unterstützt und ist einfach zu installieren. Wenn du dir nicht sicher bist, ob du Node installiert hast, öffne dein Terminal (oder die Eingabeaufforderung unter Windows) und führe den folgenden Befehl aus:

node -v

Die Ausgabe sollte eine Node-Version sein oder "Befehl nicht gefunden", wenn Node nicht installiert ist.

Wenn du Node nicht installiert hast oder deine Node-Version niedriger als 12.2.0 ist, besuche bitte die Node-Projekt-Website und lade das Installationsprogramm für die neueste Version auf deinem Betriebssystem herunter(Abbildung 1-1).

Sobald der Download abgeschlossen ist, klickst du auf das Installationsprogramm und folgst den Anweisungen, umes einzurichten.

Wenn du Node installierst, hast du neben dem Befehl node auch den Befehl npm zum Kommandozeilenwerkzeug hinzugefügt. Wenn du den Befehl node -v eingibst, solltest du die installierte Versionsnummer angezeigt bekommen .

Abbildung 1-1. Aktuelle Version zum Herunterladen auf der offiziellen Website von Node

NPM

Der Node Package Manager (NPM) ist der Standard-Paketmanager für Node. Er wird standardmäßig zusammen mit Node.js installiert. Mit ihm können Entwickler/innen ganz einfach andere Node-Pakete herunterladen und installieren. Vue und andere Frontend-Frameworks sind Beispiele für hilfreiche Node-Pakete.

NPM ist ein leistungsfähiges Werkzeug für die Entwicklung komplexer JavaScript-Anwendungen. Es ermöglicht die Erstellung und Ausführung von Aufgabenskripten (z.B. zum Starten eines lokalen Entwicklungsservers) und das automatische Herunterladen von Projektpaketabhängigkeiten.

Ähnlich wie bei der Node-Versionsprüfung kannst du eine NPM-Versionsprüfung mit dem Befehl npm durchführen:

npm -v

Um deine NPM-Version zu aktualisieren, benutze den folgenden Befehl:

npm install npm@latest -g

Mit dem Parameter @latest aktualisiert dein aktuelles NPM-Tool seine Version automatisch auf die neueste Version. Du kannst npm -v erneut ausführen, um sicherzustellen, dass es korrekt aktualisiert wird. Du kannst auch das Wort latest ersetzen, um eine bestimmte NPM-Version anzusteuern (im Format xx.x.x). Außerdem musst du die Installation auf globaler Ebene mit dem Flag -g angeben, damit der Befehl npm überall auf deinem lokalen Rechner verfügbar ist. Wenn du zum Beispiel den Befehl npm install npm@6.13.4 -g ausführst, zielt das Tool auf die NPM-Paketversion 6.13.4, um zu installieren und zu aktualisieren.

NPM-Version für dieses Buch

Ich empfehle, NPM in der Version 7.x zu installieren, um alle NPM-Codebeispiele in diesem Buch nachvollziehen zu können.

Ein Node-Projekt hängt von einer Sammlung von Node-Paketen² (oder Abhängigkeiten) ab, damit es funktioniert. In der Datei package.json im Projektverzeichnis findest du diese installierten Pakete. Diese package.json-Datei beschreibt auch das Projekt, einschließlich des Namens, des Autors/der Autoren und anderer Skriptbefehle, die ausschließlich auf das Projekt angewendet werden.

Wenn du den Befehl npm install (oder npm i) im Projektordner ausführst, bezieht sich NPM auf diese Datei und installiert alle aufgelisteten Pakete in einem Ordner namens node_modules, der für das Projekt zur Verfügung steht. Außerdem fügt es eine package-lock.json Datei hinzu, um die installierte Paketversion und die Kompatibilität zwischen den gemeinsamen Abhängigkeiten im Auge zu behalten.

Um ein Projekt von Grund auf mit Abhängigkeiten zu starten, verwende den folgenden Befehl im Projektverzeichnis:

npm init

Dieser Befehl führt dich durch einige Fragen im Zusammenhang mit dem Projekt und initialisiert ein leeres Projekt mit einer package.json Datei, die deine Antworten enthält .

Du kannst auf der offiziellen NPM-Website nach allen öffentlichen Open-Source-Paketen suchen.

Garn

Wenn NPM das Standard-Paketmanager-Tool ist, dann ist Yarn ein alternativer und beliebter Paketmanager, der von Facebook entwickelt wurde.³ Yarn ist schneller, sicherer und zuverlässiger, weil es parallel herunterlädt und zwischenspeichert. Er ist mit allen NPM-Paketen kompatibel und kann daher als Ersatz für NPM verwendet werden.

Du kannst die neueste Version von Yarn für dein Betriebssystem installieren, indem du die offizielle Yarn Website besuchst.

Wenn du auf einem macOS Computer arbeitest und Homebrew installiert hast, kannst du Yarn direkt mit dem Befehl installieren:

brew install yarn

Dieser Befehl installiert Yarn und Node.js (falls nicht vorhanden) global.

Du kannst Yarn auch global mit dem NPM-Paketmanagement-Tool mit folgendem Befehl installieren:

npm i -g yarn

Yarn sollte jetzt auf deinem Rechner installiert und einsatzbereit sein.

Um zu überprüfen, ob Yarn installiert ist und welche Version es hat, verwende den folgenden Befehl:

yarn -v

Um ein neues Paket hinzuzufügen, verwende den folgenden Befehl:

yarn add <node package name>

Um die Abhängigkeiten für ein Projekt zu installieren, musst du anstelle von npm install nur den Befehl yarn im Projektverzeichnis ausführen. Sobald dies abgeschlossen ist, fügt Yarn, ähnlich wie NPM, auch eine Datei yarn.lock in deinem Projektverzeichnis hinzu.

Hinweis

Wir werden Yarn als Paketmanager für den in diesem Buch vorgestellten Code verwenden.

An diesem Punkt hast du deine grundlegende Programmierumgebung für die Vue-Entwicklung eingerichtet. Im nächsten Abschnitt werfen wir einen Blick auf die Vue Developer Tools und was sie uns bei der Arbeit mit Vue bieten.

Vue Entwickler Tools

Die Vue Developer Tools (oder Vue Devtools) sind die offiziellen Tools, mit denen du lokal mit deinen Vue-Projekten arbeiten kannst. Zu diesen Tools gehören Erweiterungen für Chrome und Firefox sowie eine Electron-Desktop-Anwendung für andere Browser. Du solltest eines dieser Tools während des Entwicklungsprozesses installieren .

Chrome-Nutzer können den Link zur Erweiterung im Chrome Web Store aufrufen und die Erweiterung installieren, wie in Abbildung 1-2 gezeigt.

Abbildung 1-2. Vue Devtools Erweiterungsseite für Chrome

Für Firefox kannst du den Link zur Erweiterung auf der Firefox Add-on Seite verwenden, wie in Abbildung 1-3 gezeigt.

Abbildung 1-3. Vue Devtools Erweiterungsseite für Firefox

Sobald deine Erweiterung installiert und aktiviert ist, kannst du feststellen, ob eine Website Vue in der Produktion verwendet. Wenn eine Website mit Vue erstellt wurde, wird das Vue-Symbol in der Browser-Symbolleiste hervorgehoben, wie in Abbildung 1-4 gezeigt.

Abbildung 1-4. Das Icon bestätigt, dass die offizielle Vue-Website mit Vue erstellt wurde

Mit den Vue Devtools kannst du den Vue-Komponentenbaum, Komponenten-Requisiten und Daten, Ereignisse und Routing-Informationen in der Entwicklerkonsole des Browsers einsehen. Die Vue Devtools unterteilen die Informationen in verschiedene Tabs, die hilfreiche Einblicke für das Debugging und die Untersuchung des Verhaltens jeder Vue-Komponente innerhalb des Projekts bieten.

Vite.js als Werkzeug für die Bauherrenverwaltung

Der 2020 eingeführte Vite.js (oder Vite) ist ein JavaScript-Entwicklungsserver, der das native ES-Modul verwendet⁴ Import während der Entwicklung verwendet, anstatt deinen Code in JavaScript-Blöcken zu bündeln, wie es Webpack, Rollup usw. tun.

Hinweis

Von nun an werden wir den Begriff Vite für Vite.js verwenden.

Dieser Ansatz ermöglicht es Vite, einen Hot Reload⁵ während der Entwicklung mit einer wahnsinnigen Geschwindigkeit durchführen, was die Entwicklung nahtlos macht. Außerdem bietet Vite viele Out-of-the-Box-Funktionen wie TypeScript-Unterstützung und On-Demand-Kompilierung, die sich in der Entwicklergemeinschaft schnell großer Beliebtheit erfreuen .

Die Vue-Community hat das Vue CLI-Tool⁶ (das unter der Haube Webpack verwendet) durch Vite ersetzt, um das Standard-Builder-Tool für die Erstellung und Verwaltung von Vue-Projekten zu sein.

Eine neue Vue-Anwendung erstellen

Mit Vite gibt es verschiedene Möglichkeiten, ein neues Vue-Anwendungsprojekt zu erstellen. Am einfachsten ist es, die folgende Befehlssyntax in deiner Eingabeaufforderung oder deinem Terminal zu verwenden :

npm init vue@latest

Dieser Befehl installiert zunächst create-vue, ein offizielles Gerüstwerkzeug, und präsentiert dir dann eine Liste mit den wichtigsten Fragen zur Konfiguration deiner Vue-Anwendung.

Wie in Abbildung 1-5 dargestellt, werden für die Vue-Anwendung in diesem Buch die Konfigurationen verwendet:

Der Vue-Projektname, alles in Kleinbuchstaben

Vite verwendet diesen Wert, um ein neues Projektverzeichnis zu erstellen, das in deinem aktuellenVerzeichnis verschachtelt ist .

TypeScript

Eine typisierte Programmiersprache, die auf JavaScript aufbaut.

JSX⁷

In Kapitel 2 werden wir besprechen, wie Vue das Schreiben von Code im JSX-Standard (Schreiben von HTML-Syntax direkt im JavaScript-Codeblock) unterstützt.

Vue Router

In Kapitel 8 werden wir das Routing in unserer Anwendung mit dem Vue Router implementieren.

Pinia

In Kapitel 9 werden wir die Verwendung von Pinia zur Verwaltung und gemeinsamen Nutzung von Daten in der Anwendung besprechen.

Vitest

Dies ist das offizielle Unit-Testing-Tool für jedes Vite-Projekt, das wir in Kapitel 11 näher betrachten werden.

ESLint

Dieses Tool prüft deinen Code anhand einer Reihe von ESLint-Regeln und hilft dabei, deinen Codestandard zu erhalten, ihn lesbarer zu machen und versteckte Codierungsfehler zu vermeiden .

Hübscher

Dieses Tool formatiert deine Codestile automatisch, damit dein Code sauber und schön bleibt und einem Codierungsstandard folgt.

Abbildung 1-5. Konfigurationen für ein neues Vue-Anwendungsprojekt

Nachdem du die gewünschten Konfigurationen erhalten hast, erstellt create-vue die entsprechenden Gerüste für dein Projekt. Danach werden dir eine Reihe von Befehlen präsentiert, die du ausführen kannst, um dein Projekt lokal zum Laufen zu bringen (siehe Abbildung 1-6).

Abbildung 1-6. Nacheinander auszuführende Befehle für das neu erstellte Projekt

Als Nächstes werden wir die Dateistruktur unseres neu erstellten Projekts untersuchen.

Struktur des Datei-Repository

Ein neues Vue-Projekt enthält die folgende Anfangsstruktur im Verzeichnis src :

assets

Ordner, in dem du Projektbilder, Grafiken und CSS-Dateien ablegen kannst.

components

Ordner, in dem du Vue-Komponenten nach dem Single File Component (SFC) Konzept erstellst und schreibst .

router

Ordner, in dem alle Routing-Konfigurationen gespeichert sind.

stores

Ordner, in dem du mit Hilfe von Pinia globale Projektdaten pro Store erstellst und verwaltest.

views

Ordner, in dem sich alle Vue-Komponenten befinden, die an definierte Routen binden.

App.vue

Die Hauptkomponente der Vue-Anwendung fungiert als Root und hostet alle anderen Vue-Komponenten innerhalb der Anwendung.

main.ts

Enthält den TypeScript-Code, der für das Einbinden der Stammkomponente (App.vue) in ein HTML-Element auf der DOM-Seite verantwortlich ist. In dieser Datei werden auch Plugins und Bibliotheken von Drittanbietern in der Anwendung eingerichtet, z. B. Vue Router, Pinia usw. .

Abbildung 1-7 zeigt die Struktur unseres Vue-Projekts.

Abbildung 1-7. Dateistruktur unseres erstellten Learning-Vue-App-Projekts

Im Stammverzeichnis des Projekts befindet sich eine index.html Datei, die den Einstiegspunkt für das Laden deiner Anwendung im Browser darstellt. Sie importiert die Datei main.ts mit dem Tag <script> und liefert das Zielelement für die Vue-Engine, um die Vue-Anwendung zu laden, indem sie den Code in main.ts ausführt. Diese Datei wird während des Entwicklungsprozesses wahrscheinlich unverändert bleiben .

Du findest den gesamten Beispielcode in dem dafür vorgesehenen Github-Repository. Wir organisieren diese Codedateien nach Kapiteln.

Zusammenfassung

In diesem Kapitel haben wir die Vorteile von Vue kennengelernt und erfahren, wie wir die wichtigsten Werkzeuge für unsere Vue-Entwicklungsumgebung installieren. Außerdem haben wir die Vue-Entwicklerwerkzeuge und andere Tools wie Vite besprochen, mit denen wir effektiv ein Vue-Projekt erstellen können. Jetzt, wo wir unser erstes Vue-Projekt erstellt haben, sind wir bereit, Vue kennenzulernen und mit den Grundlagen zu beginnen: die Vue-Instanz, die eingebauten Direktiven und wie Vue mit Reaktivität umgeht.

¹ Das MVC-Muster hilft bei der Implementierung einer Anwendung, indem es die Struktur in die Benutzeroberfläche (View), die Daten (Model) und die Steuerungslogik (Controller) aufteilt. Während die View und der Controller eine wechselseitige Bindung haben können, manipuliert nur der Controller das Model.

² Diese sind allgemein als NPM-Pakete bekannt.

³ Facebook ist seit 2021 unter dem Namen Meta bekannt.

⁴ ES-Module steht für ECMAScript-Module, ein beliebter Standard für die Arbeit mit Modulen seit der Veröffentlichung von ES6, zunächst für Node.js und seit kurzem auch in Browsern.

⁵ Hot reload wendet die neuen Codeänderungen automatisch auf eine laufende Anwendung an, ohne die Anwendung neu zu starten oder die Seite zu aktualisieren.

⁶ Die Vue-Befehlszeilenschnittstelle.

⁷ JavaScript XML, häufig in React verwendet