Einführung und Projektsetup

Einführung und Projektsetup

0:00 Willkommen zum ersten Modul. Wir steigen in Vue ein, und das lohnt sich gerade jetzt: Vue ist eines der drei großen Frontend-Frameworks, und die Fassung, über die wir sprechen, ist deutlich anders als das, was viele noch aus älteren Projekten kennen. In diesem Modul geht es nicht darum, möglichst schnell etwas Buntes auf den Bildschirm zu bekommen.

0:19 Es geht darum, dass Sie am Ende verstehen, was beim Start einer Vue-Anwendung eigentlich passiert — vom HTML-Element auf der Seite bis zur ersten eigenen Komponente. Wer diesen Weg einmal sauber im Kopf hat, findet sich in jedem fremden Vue-Projekt zurecht.

Überblick über Vue und seine Architektur

0:34 Bevor wir irgendetwas installieren, klären wir das Grundsätzliche. Was ist Vue eigentlich, und was macht es anders als das, was Sie vielleicht aus reinem JavaScript kennen? Zwei Ideen tragen das ganze Framework — und wenn Sie die verstanden haben, erklärt sich vieles Weitere fast von selbst. Ich nehme mir für dieses Kapitel bewusst Zeit, obwohl noch keine Zeile Code entsteht.

0:55 Wer die Grundidee überspringt, lernt Vue später als Sammlung von Rezepten statt als System — und steht beim ersten unerwarteten Verhalten ohne Erklärung da. Stellen Sie sich den Unterschied so vor: Bisher haben Sie dem Browser gesagt, welche Handgriffe er machen soll — such dieses Element, ändere den Text, färbe den Rahmen rot.

1:15 Vue dreht das um. Sie beschreiben, wie die Oberfläche bei einem bestimmten Zustand aussehen soll, und das Framework kümmert sich um die Handgriffe. Das ist der Kern des Wortes deklarativ. Dazu kommt, dass Vue mitverfolgt, welche Daten sich ändern, und genau die Stellen aktualisiert, die davon abhängen. Klingt unspektakulär, verändert aber die Art, wie man Oberflächen schreibt, ganz erheblich.

1:39 Diese beiden Punkte sind bewusst nebeneinandergestellt, weil sie zusammengehören und einzeln wenig nützen. Ein Template ohne Reaktivität wäre eine Vorlagensprache, wie es sie seit Jahrzehnten gibt — einmal gerendert und dann tot. Reaktivität ohne Template wäre ein Beobachtungsmechanismus, bei dem Sie das DOM weiterhin selbst anfassen müssten.

1:58 Erst die Kombination ergibt das, was Vue ausmacht: Sie ändern eine Variable, und die Oberfläche zieht nach. Behalten Sie das im Kopf — jedes Verhalten, das Ihnen in den nächsten Modulen merkwürdig vorkommt, lässt sich meist auf eine dieser beiden Fähigkeiten zurückführen. Der praktische Gewinn ist größer, als er auf den ersten Blick aussieht.

2:19 In klassisch geschriebenem JavaScript besteht ein guter Teil des Codes daraus, die Anzeige nachzuführen: Element suchen, Wert setzen, Klasse umschalten. Genau dieser Code ist es, der bei Änderungen als Erstes auseinanderläuft — irgendwo wird ein Feld aktualisiert und an einer zweiten Stelle vergessen. Der deklarative Ansatz nimmt Ihnen diese Buchhaltung ab. Was bleibt, ist der Teil, der wirklich Ihre Anwendung ausmacht.

2:43 Und ein angenehmer Nebeneffekt: Der Code liest sich hinterher wie die Oberfläche, die er erzeugt. Was Sie hier sehen, ist eine vollständige Vue-Komponente — mehr braucht es nicht. Interessant ist der Aufbau: Oben steht die Logik, unten die Struktur, und beides liegt in einer Datei. Diese Bündelung hat einen Namen, Single-File Component, und sie ist eine der prägenden Ideen von Vue.

3:06 Sie werden gleich sehen, dass unten noch ein dritter Block für das Aussehen dazukommen kann. Achten Sie auf eine Kleinigkeit: Die Variable aus dem Skript taucht im Template einfach auf, ohne dass sie irgendwo angemeldet oder exportiert wurde. Warum das funktioniert, klären wir in Modul 5. Diese Aufstellung erklärt einen Begriff, der Ihnen ständig begegnen wird: progressives Framework. Gemeint ist, dass Sie nicht alles oder nichts wählen müssen.

3:33 Sie können Vue auf einer bestehenden Seite für ein einziges Formular einsetzen, ohne irgendetwas umzubauen. Oder Sie bauen eine komplette Anwendung damit. Dieselbe Kernidee, verschieden viel Drumherum. Für unser Seminar gehen wir den Weg der Single Page Application, weil dort alle Bausteine vorkommen — Komponenten, Routing, Zustand, Deployment.

3:54 Wenn Sie später einen der anderen Wege brauchen, kennen Sie das Fundament bereits. Der erste Punkt ist der teuerste, und er trifft fast jeden: Sie suchen etwas, finden einen gut geschriebenen Beitrag — und der ist von 2019. Vue 2 und Vue 3 sehen sich ähnlich genug, dass man den Unterschied beim Überfliegen nicht merkt, und verschieden genug, dass der Code nicht funktioniert.

4:17 Achten Sie beim Recherchieren auf das Datum und auf die Schreibweise. Ähnlich beim zweiten Punkt: In Vue 3 gibt es zwei Programmierstile nebeneinander, und Suchtreffer mischen sie fröhlich. Wir arbeiten durchgehend mit dem neueren — dazu in Modul 5 mehr.

Einrichten der Entwicklungsumgebung

4:33 Jetzt wird es praktisch. Bevor das erste Projekt entstehen kann, brauchen wir eine Arbeitsumgebung. Das ist erfreulich wenig — drei Dinge, und zwei davon haben Sie vermutlich schon. Trotzdem lohnt es sich, kurz hinzusehen, weil ein Fehler an dieser Stelle sich später als scheinbar unerklärliches Problem meldet. Genau das ist das Tückische an Umgebungsproblemen: Sie treten nicht dort auf, wo ihre Ursache liegt, sondern irgendwo weiter hinten.

4:58 Zehn Minuten Sorgfalt hier ersparen Ihnen später eine Stunde Suche im eigenen Code. Die gute Nachricht vorweg: Sie installieren nichts, was speziell mit Vue zu tun hätte. Kein globales Vue-Paket, kein Kommandozeilenwerkzeug, das Sie pflegen müssten. Was Sie brauchen, ist eine Node-Laufzeit, damit der Entwicklungsserver und der spätere Bau laufen können, ein Editor, der eine Vue-Datei als solche erkennt, und die Vue-Erweiterung für den Browser.

5:24 Alles Übrige zieht sich das Projekt später selbst als Abhängigkeit — und zwar genau in der Version, die zum Projekt gehört. Das ist ein Fortschritt gegenüber Zeiten, in denen global installierte Werkzeuge zwischen Projekten in Konflikt gerieten. Vier Zeilen, und der Hinweis darunter ist der wichtigste Teil. Vue 3.5 verlangt eine recht aktuelle Node-Version.

5:45 Wer eine ältere hat, merkt das nicht bei der Installation, sondern erst, wenn das Anlegen des Projekts mit einer Meldung abbricht — und die liest man dann als Fehler im Werkzeug statt als Hinweis auf die Laufzeit. Prüfen Sie das jetzt, es kostet zehn Sekunden. Wenn Sie auf einem Rechner mit mehreren Projekten arbeiten, lohnt sich ein Versionsmanager, der Ihnen mehrere Node-Stände parallel verwaltet und je Projekt den passenden auswählt.

6:10 Ich weiß, Erweiterungen für den Editor klingen nach Geschmackssache. Hier ist sie es nicht. Ohne die Erweiterung ist eine Vue-Datei für Ihren Editor eine Textdatei mit merkwürdigem Inhalt — keine Hervorhebung, keine Autovervollständigung, kein Sprung zur verwendeten Komponente. Vor allem aber kennt die Erweiterung die besonderen Funktionen, die es nur in Vue-Dateien gibt, und meldet Tippfehler sofort statt erst im Browser.

6:35 Ein Hinweis für die VS-Code-Nutzer: Die aktuelle Erweiterung heißt Vue - Official. Wer noch die alte namens Vetur installiert hat, sollte sie abschalten, sonst widersprechen sich beide. Der rote Faden dieser fünf Schritte ist einfach: erst die Laufzeit, dann die Werkzeuge, die Ihnen beim Schreiben helfen, und zuletzt der Blick in den Browser.

6:55 Wichtig ist vor allem Schritt zwei — die Version wirklich nachsehen und sich nicht darauf verlassen, dass Node ja irgendwann einmal installiert wurde. Erfahrungsgemäß ist der Stand auf einem Entwicklerrechner älter, als man denkt. Wenn Sie diese fünf Schritte hinter sich haben, sind Sie für den Rest des Seminars ausgerüstet — wir installieren später nichts mehr, was nicht zum Projekt selbst gehört.

7:17 Der erste und der zweite Punkt hängen zusammen und kosten regelmäßig eine Viertelstunde. Eine zu alte Node-Version beschwert sich nicht beim Installieren, sondern beim Anlegen des Projekts — und die Meldung sieht aus, als sei das Gerüstwerkzeug kaputt. Zwei aktive Editor-Erweiterungen wiederum melden Fehler, die es gar nicht gibt, und Sie suchen im eigenen Code.

7:37 Merken Sie sich als Faustregel: Wenn etwas an dieser Stelle unerklärlich wirkt, prüfen Sie zuerst die Umgebung, nicht den Code. Und der letzte Punkt zur Beruhigung: Ein global installiertes Vue-Paket brauchen Sie heute nirgends mehr.

Vue-CLI und moderne Toolchains verstehen

7:51 Ein kurzes Kapitel, aber eines, das Ihnen viel Verwirrung erspart. Es geht um die Werkzeuge, mit denen ein Vue-Projekt gebaut wird — und darum, dass es davon zwei Generationen gibt. Anleitungen im Netz stammen aus beiden Welten, ohne das dazuzusagen. Wenn Sie also demnächst einen Beitrag lesen, dessen Befehle bei Ihnen nicht funktionieren, liegt das oft nicht an Ihnen.

8:12 Es lohnt sich, die beiden Welten auseinanderhalten zu können — dann erkennen Sie eine veraltete Anleitung an der ersten Codezeile. Für viele Jahre war Vue CLI der Standardweg, ein Vue-Projekt anzulegen. Sie finden dieses Werkzeug in unzähligen Anleitungen, Büchern und Videos. Die Dokumentation sagt heute klar: Es ist im Wartungsmodus, und neue Projekte sollten mit Vite starten.

8:36 Das ist keine Abwertung — Vue CLI funktioniert weiterhin, und Bestandsprojekte laufen damit ohne Probleme. Aber es ist eine Wegweisung. Wenn Sie heute neu anfangen, führt der empfohlene Weg über ein Gerüstwerkzeug namens create-vue, das ein Vite-Projekt für Sie vorbereitet. Die Zeile, auf die es ankommt, ist die zum Entwicklungsserver.

8:57 Der ältere Ansatz bündelt die gesamte Anwendung, bevor er sie ausliefert — bei größeren Projekten wartet man da beim Start eine ganze Weile. Der neuere liefert die Dateien als Module aus und lässt den Browser zusammensetzen, was er gerade braucht. Das Ergebnis merken Sie sofort: Der Server ist praktisch sofort da, und eine Änderung erscheint ohne spürbare Verzögerung.

9:18 Interessant ist, dass für den Produktionsbau trotzdem gebündelt wird — dort zählt die Größe, nicht die Startzeit. Ich will das nicht größer machen, als es ist: Am Ende kommt bei beiden Wegen eine funktionierende Anwendung heraus. Der Unterschied liegt im Alltag. Wenn Sie am Tag hundertmal etwas ändern und ansehen, macht es einen erheblichen Unterschied, ob dazwischen zwei Sekunden oder zweihundert Millisekunden liegen.

9:43 Das ist keine Bequemlichkeit, das ändert die Art, wie man arbeitet — man probiert mehr aus, wenn Ausprobieren billig ist. Der zweite spürbare Punkt ist die Konfiguration: Eine gewachsene webpack-Datei ist ein eigenes Fachgebiet, die Vite-Konfiguration passt meist auf eine halbe Bildschirmseite. Der zweite Punkt ist eine echte Falle, weil er stumm scheitert. Umgebungsvariablen heißen in beiden Welten unterschiedlich.

10:07 Wer eine Anleitung aus der CLI-Zeit übernimmt, schreibt die Variable mit dem alten Präfix — und sie kommt schlicht nicht an. Keine Fehlermeldung, nur ein Wert, der nicht da ist. Merken Sie sich für jede Anleitung, die Sie im Netz finden: Schauen Sie zuerst auf den Startbefehl. Steht dort vue create, sind Sie in der älteren Welt, und Sie müssen mitübersetzen. Wir kommen in Modul 12 auf die Variablen zurück.

Projekt erstellen mit create-vue

10:32 Jetzt legen wir das Projekt an, mit dem wir das ganze Seminar über arbeiten werden. Ein einziger Befehl, ein kurzer Dialog — und danach steht ein Gerüst, das schon eine ganze Menge richtig gemacht hat. Sehen wir uns an, was der Assistent fragt und warum die Antworten wichtig sind. Denn diese Fragen wirken harmlos, entscheiden aber darüber, ob Sie in Modul 8 und 10 gleich loslegen können oder erst nachrüsten müssen.

10:56 Neunmal Enter zu drücken ist hier die teuerste Abkürzung des Tages. create-vue ist bewusst schlank gehalten. Es ist kein Framework-Werkzeug, das Sie später pflegen müssten, sondern ein Gerüstbauer: Es fragt ab, was hineinsoll, schreibt die Dateien und verabschiedet sich. Danach haben Sie ein ganz normales Vite-Projekt, und alle weiteren Fragen beantwortet die Vite-Dokumentation.

11:18 Was Sie im Dialog verneinen, lässt sich später von Hand nachrüsten — es ist nur mehr Arbeit, weil Sie dann selbst wissen müssen, welche Datei wohin gehört. Deshalb lohnt es sich, einmal kurz nachzudenken, statt neunmal Enter zu drücken. Vier Zeilen, und darin steckt der komplette Start. Achten Sie auf den Zusatz hinter dem Paketnamen — der sorgt dafür, dass wirklich die aktuelle Fassung des Gerüstwerkzeugs gezogen wird und nicht eine, die vor Monaten einmal zwischengespeichert wurde.

11:46 Nach dem Anlegen kommen die beiden Schritte, die man gern übersieht: Der Assistent installiert die Abhängigkeiten nicht selbst, das machen Sie mit dem zweiten Befehl. Und dann startet der Entwicklungsserver, der Ihnen eine lokale Adresse meldet. Ab diesem Moment läuft er im Hintergrund weiter, während wir arbeiten. Neun Fragen, und die Spalte rechts ist unsere Antwort für dieses Seminar. Zwei davon sind wichtig: Router und Pinia.

12:11 Auf beiden bauen ganze Module später auf, und sie nachzurüsten ist zwar möglich, aber unnötige Mühe. TypeScript lassen wir bewusst weg — nicht weil es schlecht wäre, im Gegenteil, sondern weil wir uns auf Vue konzentrieren wollen und nicht auf zwei neue Dinge gleichzeitig. Als Projektnamen nehmen wir alle denselben: Leihkiste. Das ist unsere durchgehende Beispielanwendung, eine Nachbarschafts-Werkzeugausleihe, die uns bis Modul 12 begleitet.

12:38 Jetzt sind Sie dran. Legen Sie das Projekt an, und achten Sie dabei bewusst auf die Antworten im Dialog — es geht in dieser Aufgabe nicht nur darum, dass am Ende etwas läuft, sondern darum, dass Sie einschätzen können, was die einzelnen Fragen bewirken. Der Nachweis ist einfach: Der Entwicklungsserver startet, die Startseite erscheint im Browser, und im Projekt liegen die beiden Ordner für Router und Zustandsverwaltung.

13:01 Falls Sie eine der beiden Fragen verneint haben — legen Sie das Projekt einfach neu an. Das dauert eine Minute und ist der schnellere Weg. Der zweite Punkt erwischt sehr viele: Man legt gewohnheitsmäßig erst einen Ordner an, wechselt hinein und startet dann den Assistenten — und hat hinterher einen Ordner im Ordner. Der Assistent erzeugt das Verzeichnis selbst. Der dritte Punkt ist der häufigste Anfängerfehler überhaupt: Nach dem Gerüst fehlt noch die Installation der Abhängigkeiten.

13:29 Wer die überspringt und gleich den Entwicklungsserver startet, bekommt eine Fehlermeldung, die nach einem kaputten Projekt aussieht. Und zum letzten Punkt: Die Vue Devtools im Assistenten sind etwas anderes als die Browser-Erweiterung — verwechseln Sie die beiden nicht.

Projektstruktur und typische Ordnerkonzepte

13:44 Das Gerüst steht — jetzt sehen wir uns an, was es eigentlich angelegt hat. Die Struktur ist überschaubar und folgt einer Konvention, die Sie in fast jedem Vue-Projekt wiederfinden werden. Das ist praktisch: Wer die Ordner einmal kennt, findet sich auch in fremdem Code schnell zurecht. Unterschätzen Sie diesen Effekt nicht.

14:03 Ein gemeinsamer Aufbau über die ganze Vue-Welt hinweg spart in jedem neuen Projekt die Einarbeitung — und in jedem Team die Diskussion darüber, wo eine neue Datei hingehört. Die Aufteilung folgt einer einfachen Logik: Unter src liegt alles, was Sie schreiben. Daneben gibt es einen Ordner für Dateien, die unverändert ausgeliefert werden sollen, und im Wurzelverzeichnis stehen die Konfigurationsdateien.

14:26 Wichtig ist der Satz am Ende: Das ist Konvention, kein Zwang. Vue selbst kennt keinen Ordner namens views und interessiert sich nicht dafür, wie Sie Ihre Dateien sortieren. Der Vorteil einer Konvention liegt woanders — sie erspart in jedem neuen Projekt die Diskussion darüber, wo etwas hingehört. Gehen wir die wichtigen durch. Die ersten beiden Zeilen sind der Einstieg, dazu gleich mehr im nächsten Kapitel.

14:51 Interessant ist die Unterscheidung zwischen components und views: Eine View ist eine Komponente, die eine ganze Seite füllt und zu einer Adresse gehört, eine Komponente ist ein Baustein darin. Technisch gibt es keinen Unterschied, konzeptionell einen großen — und spätestens in Modul 8, wenn wir Routen einrichten, wird die Trennung sehr praktisch.

15:10 Die beiden letzten Zeilen sehen ähnlich aus und sind es nicht, dazu gleich mehr. Hier lohnt sich das genaue Hinsehen, weil der Unterschied im Alltag Folgen hat. Eine Datei im assets-Ordner läuft durch den Bauprozess: Sie wird optimiert und bekommt eine Prüfsumme in den Dateinamen. Das klingt nach einem Detail, ist aber der Trick, mit dem Browser-Caching funktioniert — der Browser darf die Datei ewig behalten, denn wenn sich der Inhalt ändert, ändert sich der Name.

15:36 Eine Datei im public-Ordner behält Namen und Pfad und wird nur kopiert. Das brauchen Sie genau dann, wenn eine Datei unter einer festen, vorhersehbaren Adresse erreichbar sein muss. Der erste Punkt ist der, den man später bereut: Große Bilder landen im public-Ordner, weil es dort so schön einfach ist — und verlieren damit jede Optimierung durch den Bauprozess.

15:58 Der letzte Punkt ist eine Einladung zur Gelassenheit. Es besteht die große Versuchung, am ersten Tag eine ausgefeilte Ordnerhierarchie anzulegen, weil man ja weiß, dass das Projekt wächst. Meine Empfehlung: Fangen Sie flach an. Struktur, die Sie später aus einem echten Bedürfnis heraus einziehen, passt besser als jede vorausgedachte.

Analyse eines generierten Vue-Projekts

16:18 Wir haben ein Projekt und wissen, wo was liegt. Jetzt kommt der Teil, der Ihnen in jedem fremden Vue-Projekt helfen wird: Wie startet so eine Anwendung eigentlich? Der Weg ist immer derselbe, und er ist erfreulich kurz — drei Stationen, mehr nicht. Ich lege Ihnen ans Herz, diesen Weg einmal bewusst nachzugehen, statt ihn nur zur Kenntnis zu nehmen.

16:38 Es ist das Wissen, das den Unterschied macht zwischen Ratlosigkeit und einer gezielten Frage, wenn eine Anwendung einmal nichts anzeigt. Der Einstieg besteht aus zwei Schritten, und die sind bewusst getrennt. Zuerst wird eine Anwendungsinstanz erzeugt — an dieser Stelle passiert noch nichts Sichtbares. Danach wird sie in ein Element der Seite eingehängt, und erst dann rendert Vue etwas.

17:01 Der Grund für die Trennung ist praktisch: Zwischen diesen beiden Schritten ist der Platz für alles, was anwendungsweit gelten soll — der Router, die Zustandsverwaltung, globale Komponenten, ein Fehlerbehandler. Merken Sie sich diesen Satz: Alle Konfiguration gehört vor das Einhängen. Danach greift sie nicht mehr. Das ist der komplette Startpunkt Ihrer Anwendung — mehr steht da nicht drin. Was Sie hier sehen, ist genau das Muster von eben: erzeugen, konfigurieren, einhängen.

17:28 Die mittlere Zeile mit dem Router ist der Platz, an dem später Ihre Erweiterungen stehen; im Laufe des Seminars kommt dort die Zustandsverwaltung dazu, in Modul 11 vielleicht eine eigene Direktive. Der Selektor in der letzten Zeile verweist auf ein Element in der HTML-Datei — und wenn Sie einmal eine weiße Seite ohne Fehlermeldung sehen, ist genau dieser Bezug einer der ersten Punkte, die ich prüfen würde.

17:52 Diesen Fünfschritt können Sie sich merken, er funktioniert bei jedem Vue-Projekt, das Ihnen begegnet — auch bei einem gewachsenen, unübersichtlichen. Sie fangen außen an, beim HTML, folgen dem Faden zum Einstiegspunkt, von dort zur Wurzelkomponente und dann weiter nach innen zu den Kindern. Erst ganz am Schluss sehen Sie sich die Konfigurationsdateien an.

18:11 Der Reiz dieses Vorgehens liegt darin, dass Sie sich nicht verlaufen: Sie folgen immer der tatsächlichen Aufrufkette, statt sich durch Ordner zu klicken und zu raten, was zusammengehört. Diese fünf Befehle begleiten Sie durch das ganze Seminar. Der erste ist Ihr Alltag, der zweite kommt in Modul 12 dran, und der dritte ist der, den viele nicht kennen und der doch wichtig ist: Er liefert das gebaute Ergebnis lokal aus, damit Sie es ansehen können, bevor es auf einen Server geht.

18:39 Der Entwicklungsserver und das gebaute Ergebnis verhalten sich nämlich nicht in jeder Hinsicht gleich — dazu später mehr. Welche dieser Skripte in Ihrem Projekt tatsächlich stehen, hängt von den Antworten im Assistenten ab. Diese Aufgabe wirkt banal, und genau deshalb mache ich sie. Nehmen Sie sich Ihr frisch angelegtes Projekt vor und zeichnen Sie den Weg nach: Welches Element in der HTML-Datei ist das Ziel?

19:02 Welche Zeile in der Einstiegsdatei hängt die Anwendung dort ein? Welche Komponente ist die Wurzel? Der Erfolg ist erreicht, wenn Sie zu jedem dieser drei Schritte die Datei und die entscheidende Zeile benennen können, ohne suchen zu müssen. Das ist Wissen, das Sie beim ersten kaputten Projekt zurückbekommen — und zwar sofort.

19:22 Der erste Punkt ist der häufigste echte Fehler in diesem Kapitel: Man ergänzt eine Konfiguration und schreibt sie versehentlich unter den Einhänge-Aufruf. Dann läuft die Anwendung, aber die Ergänzung wirkt nicht — ohne jede Meldung. Der dritte Punkt überrascht viele, die von anderen Werkzeugen kommen: Die HTML-Datei liegt bei Vite im Wurzelverzeichnis, nicht im public-Ordner.

19:43 Das ist kein Versehen des Gerüsts, sondern Absicht — die Datei ist bei Vite der Einstiegspunkt des Bauprozesses und nicht nur eine Vorlage.

Erste Anpassungen und Start der Anwendung

19:51 Letztes Kapitel für heute, und das schönste: Wir machen aus dem Gerüst etwas Eigenes. Sie werden sehen, dass der Ablauf immer derselbe ist — und dass er angenehm kurz ist. Vier Handgriffe, und Ihre erste eigene Komponente steht auf dem Bildschirm. Genau dieser Ablauf wird Sie durch das gesamte Seminar begleiten, und er wird Ihnen so in Fleisch und Blut übergehen, dass Sie ihn bald nicht mehr bewusst wahrnehmen.

20:15 Heute machen wir ihn noch einmal langsam. Dieser Ablauf wiederholt sich in Ihrer Laufbahn als Vue-Entwickler vermutlich tausendmal: Beispielinhalt raus, eigene Komponente anlegen, importieren, verwenden. Es lohnt sich, ihn bewusst einmal langsam zu machen, weil er danach in Fleisch und Blut übergeht. Das Angenehme daran ist, dass Sie den Entwicklungsserver dabei laufen lassen.

20:37 Sie speichern, und das Ergebnis steht im Browser, ohne dass Sie neu laden müssen. Diese unmittelbare Rückmeldung ist mehr als Komfort — sie verändert, wie oft Sie ausprobieren. Beachten Sie, was hier alles nicht steht: keine Klassendefinition, kein Export, keine Registrierung. Zwei Variablen im Skript, zwei Zeilen im Template — fertig ist die Komponente.

20:59 Die Werte sind hier bewusst fest verdrahtet, ohne Reaktivität. Das reicht völlig, um zu prüfen, dass der Weg von der Datei bis in die Anzeige funktioniert. Alles Weitere kommt später: In Modul 3 lernen Sie, was im Template noch möglich ist, in Modul 5, wie aus einem festen Wert ein reaktiver wird, und in Modul 7, wie die Komponente ihre Daten von außen bekommt.

21:22 Und hier die andere Seite. Der Import bringt die Komponente herein, und danach steht sie im Template als Tag zur Verfügung — ohne dass Sie sie irgendwo anmelden müssten. Das ist eine der angenehmen Eigenschaften der Schreibweise, mit der wir arbeiten. Achten Sie auf die Großschreibung des Tags: Ein Komponententag beginnt mit einem Großbuchstaben, damit man ihn auf einen Blick von einem HTML-Element unterscheiden kann.

21:45 Und auf die Dateiendung im Importpfad — die gehört dazu, sie ist bei Vue-Dateien nicht optional. Fünf Schritte, und der letzte ist der, der Freude macht: Sie müssen nichts neu starten. Der Entwicklungsserver bemerkt die neue Datei, bemerkt den Import und tauscht im laufenden Browser genau das aus, was sich geändert hat — ohne die Seite neu zu laden und ohne Ihren Zustand zu verlieren.

22:07 Wenn Sie aus einer Welt kommen, in der jeder Test ein Neuladen bedeutete, ist das der Moment, in dem der Unterschied greifbar wird. Probieren Sie es aus: Ändern Sie einen Text und sehen Sie zu. Damit schließen wir das Modul ab. Legen Sie Ihre erste eigene Komponente an, binden Sie sie ein, und prüfen Sie im laufenden Server, dass eine Textänderung sofort ankommt.

22:28 Das Ziel ist nicht das Ergebnis auf dem Bildschirm — das ist unspektakulär. Das Ziel ist, dass Sie den Ablauf einmal ohne Anleitung durchlaufen haben. Wenn Sie mögen, legen Sie gleich zwei Karten nebeneinander. Dann haben Sie schon die Frage im Kopf, mit der Modul 2 anfängt: Wie bekomme ich in zwei gleiche Karten verschiedene Inhalte?

22:48 Zwei dieser Punkte kosten regelmäßig Zeit, und beide haben dieselbe Ursache: Der Fehler steht nicht dort, wo man ihn sucht. Ein Tippfehler im Importpfad erscheint nicht im Terminal, sondern in der Browser-Konsole — und wer nur auf das Terminal schaut, sieht einen grünen Server und eine weiße Seite. Deshalb der letzte Punkt als Gewohnheit für den Rest des Seminars: Bleibt die Seite leer, öffnen Sie zuerst die Browser-Konsole.

23:13 In neun von zehn Fällen steht dort in Klartext, was fehlt.

Das Fundament steht

23:17 Fassen wir zusammen. Sie wissen jetzt, was Vue im Kern ausmacht — deklaratives Rendern und Reaktivität —, Sie kennen den empfohlenen Werkzeugweg über create-vue und Vite, und Sie können den Startweg einer Vue-Anwendung in jedem Projekt nachzeichnen. Vor allem aber haben Sie ein laufendes Projekt mit einer eigenen Komponente.

23:34 Im nächsten Modul wird aus dieser einen Komponente ein ganzer Baum: Wir sehen uns an, wie man eine Oberfläche sinnvoll in Bausteine zerlegt und wie diese Bausteine miteinander in Beziehung stehen.