Glückwunsch!

Glückwunsch, dein Gewohnheits-Tracker funktioniert, und du hast das Ende des Vue-Kurses erreicht! Die App lädt ihre Vorschläge aus einer Datei, lässt dich Gewohnheiten abhaken, eigene hinzufügen und entfernen, filtert die Liste, zeigt deinen Fortschritt und deine Serie und merkt sich alles. Und du hast sie selbst gebaut, Stück für Stück.

Eine letzte Verbesserung. Eine Serie kann abreißen, aber deine beste sollte nicht vergessen werden. Speichere sie mit dem Composable unter dem Schlüssel "rekord" und erhöhe in tagAbschliessen(), nachdem sich die Serie geändert hat, den Rekord, wenn die Serie länger ist:

const rekord = useLocalStorage("rekord", 0);

if (serie.value > rekord.value) {
    rekord.value = serie.value;
}

Was du gelernt hast. Sieh dir an, wie der ganze Kurs in deiner App seinen Platz gefunden hat:

• Komponenten: App.vue hält die Daten, und Gewohnheit.vue zeigt eine Gewohnheit an. Props bringen die Daten nach unten (:gewohnheit="gewohnheit"), und Ereignisse gehen nach oben (emit('umschalten', gewohnheit.id) und @umschalten="umschalten").
• Die Vorlage: {{ }} zeigt Werte an, :class streicht eine erledigte Gewohnheit durch, und :style setzt die Breite des Balkens.
• State: Refs halten, was sich ändert, mit .value im Script und ohne in der Vorlage, und wann immer sie sich ändern, aktualisiert Vue die Seite von selbst.
• Bedingungen und Listen: v-if, v-else-if und v-else wählen zwischen Laden, Fehler und App, und v-for mit :key zeigt die Gewohnheiten an.
• Formulare: v-model mit .trim, @submit.prevent und eine Fehlermeldung.
• Berechnete Werte: die Anzahl, der Prozentwert, alleErledigt und die gefilterte Liste, neu berechnet, sobald sich die Gewohnheiten ändern.
• Der Lebenszyklus: onMounted lädt die Gewohnheiten mit fetch(), sobald die App auf der Seite ist.
• Watcher und Composables: useLocalStorage speichert jeden Wert mit watch, sodass drei Zeilen drei Werte speichern.

Die App hat keine Slots, aber du kennst sie auch: Mit ihnen übernimmt eine Komponente wie das Panel aus der Lektion Slots oder die Lightbox der Fotogalerie ganze Teile der Seite von ihrer Eltern-Komponente.

Vue auf deinem eigenen Computer. Hier bereitet unsere Seite deine Dateien bei jedem Klick auf Ausführen vor. Auf deinem eigenen Computer übernimmt das ein Werkzeug namens Vite, und create-vue, das offizielle Werkzeug von Vue zum Starten eines Projekts, richtet alles für dich ein. Du brauchst Node.js (nimm die LTS-Version), das npm mitbringt, ein Programm zum Installieren von Paketen, und das Terminal (die Kommandozeile). Wechsle im Terminal in den Ordner, in dem deine Projekte liegen sollen, und führe aus:

npm create vue@latest

create-vue stellt ein paar Fragen: zuerst nach dem Namen des Projekts, etwa gewohnheits-tracker, der auch der Name seines Ordners wird, und dann danach, was dem Projekt hinzugefügt werden soll, etwa TypeScript, Vue Router oder Pinia. Du brauchst noch keines davon, wähle also keines aus. Wenn es noch etwas fragt, behalte die vorgeschlagene Antwort. Am Ende zeigt es die nächsten Befehle:

cd gewohnheits-tracker
npm install
npm run dev

cd wechselt in den Ordner des Projekts, npm install lädt Vue, Vite und alles andere herunter, was das Projekt braucht (in den Ordner node_modules), und npm run dev startet Vite. Es zeigt eine Adresse wie http://localhost:5173/: Öffne sie in deinem Browser. Lass das Terminal laufen: Immer wenn du eine Datei speicherst, aktualisiert sich die Seite im Browser von selbst. Strg+C im Terminal beendet es.

Die Dateien des Projekts. Es sind die Dateien der Übungen, nur in Ordnern:

• index.html liegt im Hauptordner des Projekts und hat dasselbe <div id="app">. Sein Script lädt /src/main.js.
• src/main.js bindet App mit createApp(App).mount("#app") ein, genau wie dein main.js.
• src/App.vue ist die Hauptkomponente. In einem neuen Projekt enthält sie ein Beispiel: Ersetze es durch deine.
• src/components/ ist für die anderen Komponenten, etwa Gewohnheit.vue (wenn der Ordner nicht da ist, lege ihn an). Der Import in App.vue wird dann zu import Gewohnheit from "./components/Gewohnheit.vue";. Du kannst die Beispielkomponenten im Ordner löschen.
• public/ ist für Dateien, die die Seite unverändert lädt. Lege gewohnheiten.json dort ab, und fetch("gewohnheiten.json") findet sie.

Lege useLocalStorage.js in src neben App.vue, und sein Import bleibt, wie er ist. (Größere Projekte legen ihre Composables oft in einen eigenen Ordner, src/composables.) Auch dein style.css kommt nach src, und src/main.js importiert es mit import "./style.css";, anstelle des Stylesheets des Beispiels, falls es eines hat.

Die Vue DevTools. Füge die Erweiterung Vue DevTools zu deinem Browser hinzu (für Chrome, Edge und Firefox; devtools.vuejs.org erklärt, wie). Die Entwicklerwerkzeuge (F12) bekommen dann einen Vue-Tab, der deine Komponenten als Baum mit ihren Props und ihrem State zeigt. Du kannst dort sogar ein Ref ändern und zusehen, wie sich die Seite ändert. Es funktioniert auf Seiten, die mit npm run dev laufen.

Online stellen. Wenn deine App fertig ist, bereitet npm run build sie fürs Internet vor: Vite legt die fertigen Dateien in den Ordner dist, wobei alle .vue-Dateien in einfaches JavaScript umgewandelt werden, das jeder Browser versteht. npm run preview zeigt dir die fertige Version auf deinem eigenen Computer. Danach kommt der Ordner dist auf einen Webserver. Am schnellsten geht das mit Netlify Drop (app.netlify.com/drop): Ziehe den Ordner dist auf die Seite, und du bekommst eine Adresse, die du an jeden schicken kannst (damit die Website online bleibt, melde dich für ein kostenloses Konto an). Dienste wie Netlify und Vercel können ein Projekt auch selbst bauen und veröffentlichen, jedes Mal wenn du seinen Code auf GitHub änderst, einer Website zum Aufbewahren von Code.

Wie geht es weiter? Du kennst jetzt den Kern von Vue: Dieselben Komponenten, Refs und berechneten Werte stecken in jeder Vue-App, ob klein oder groß. Das kommt als Nächstes:

• Vue Router für Apps mit mehreren Seiten, jede mit einer eigenen Adresse, etwa / und /statistik. Jede Seite ist eine Komponente.
• Pinia für State, den viele Komponenten teilen, etwa die Bestellung im Café. Es ist wie das Modul bestellung.js aus der Lektion Composables, mit mehr Werkzeugen und mit Unterstützung in den DevTools.
• TypeScript: Mit <script setup lang="ts"> schreibst du die Typen deiner Props und Refs auf, und der Editor findet viele Fehler, noch bevor du die App ausführst. Der TypeScript-Kurs bringt es dir bei.
• Nuxt, ein auf Vue aufbauendes Framework für ganze Websites. Es macht aus jeder Datei in seinem Ordner pages eine Seite, es kann die Seiten auf dem Server rendern, sodass Besucher und Suchmaschinen sofort fertiges HTML bekommen, und mit seinen Server-Routen kann dein eigener Code auf dem Server das fetch() der Seite beantworten.

In älteren Tutorials begegnet dir die Options API aus der ersten Lektion wieder: Komponenten, die mit export default { data() { … }, methods: { … } } statt mit <script setup> geschrieben sind. Darunter ist es dasselbe Vue, mit deinem Wissen verstehst du sie also schnell. Die Dokumentation unter vuejs.org erklärt alles, was du hier kennengelernt hast, in beiden Stilen.