Kapitel 2: Frontend & Entwicklungsumgebung vorbereiten

2.1 Erforderliche Grundlagen (Review)

Bevor Sie mit Nuxt.js beginnen, sollten Sie über folgende Grundkenntnisse verfügen:

1. Vue 3 Grundlagen

• ✅ Composition API (setup(), ref(), reactive())
• ✅ Computed Properties & Watchers
• ✅ Komponenten-Kommunikation (Props, Emits)
• ✅ Lifecycle Hooks

Beispiel (Vue 3 Composition API):

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    Klick mich! ({{ count }})
  </button>
  <p>Verdoppelt: {{ doubled }}</p>
</template>

2. ES6+ JavaScript

• ✅ Arrow Functions: const add = (a, b) => a + b
• ✅ Destructuring: const { name, age } = user
• ✅ Modules: import { foo } from './bar'
• ✅ Async/Await: const data = await fetchData()
• ✅ Spread Operator: const merged = { ...obj1, ...obj2 }

3. Node.js Grundlagen

• ✅ npm/pnpm/yarn Paketverwaltung
• ✅ package.json verstehen
• ✅ Scripts ausführen (npm run dev)

---

2.2 Entwicklungstools installieren

Visual Studio Code (VS Code)

Download: https://code.visualstudio.com/

Erforderliche VS Code Erweiterungen:

1. Volar (Vue Language Features)

• Offizielle Vue 3 Erweiterung
• Syntax-Highlighting
• IntelliSense & Autovervollständigung
• Fehlerprüfung

Installieren: Drücken Sie Ctrl+Shift+X und suchen Sie nach "Volar"

2. ESLint

• Code-Qualität sicherstellen
• Automatische Fehlererkennung
• Formatierungsregeln

3. Prettier (Code Formatter)

• Einheitliche Code-Formatierung
• Auto-Formatierung beim Speichern
• Konfigurierbare Regeln

.prettierrc Konfiguration:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

4. TypeScript Vue Plugin (Volar)

• TypeScript-Unterstützung für Vue
• Bessere Typisierung

5. Nuxt Snippets

• Code-Snippets für Nuxt 3
• Schnellere Entwicklung

---

2.3 Node.js & Paketmanager konfigurieren

Node.js installieren

✅ Erforderlich: Node.js Version 18.x oder höher

Download: https://nodejs.org/

Überprüfen Sie Ihre Version:

node --version  # Sollte v18.x oder höher sein
npm --version

Paketmanager wählen

Sie können zwischen drei Paketmanagern wählen:

Paketmanager	Befehl	Vorteile
npm	npm install	Standard, überall verfügbar
pnpm	pnpm install	Schnell, platzsparend (empfohlen)
yarn	yarn install	Schnell, zuverlässig

pnpm installieren (empfohlen):

npm install -g pnpm

Node.js Version Manager (Optional)

Für fortgeschrittene Nutzer:

• nvm (Node Version Manager) für Linux/Mac: https://github.com/nvm-sh/nvm
• nvm-windows für Windows: https://github.com/coreybutler/nvm-windows

---

2.4 Erstes Nuxt-Programm: Online Playground

Sie können Nuxt.js ohne lokale Installation directly im Browser ausprobieren!

Offizieller Nuxt Playground:

🌐 https://stackblitz.com/github/nuxt/starter

Vorteile des Playgrounds:

• ✅ Keine Installation erforderlich
• ✅ Vollständige Entwicklungsumgebung im Browser
• ✅ Sofortige Vorschau
• ✅ Code teilen (URL senden)

Schnellstart im Playground:

1. Öffnen Sie den StackBlitz-Link
2. Warten Sie, bis das Projekt geladen ist (ca. 30 Sekunden)
3. Sie sehen die Verzeichnisstruktur und eine Live-Vorschau
4. Ändern Sie Dateien und sehen Sie sofortige Änderungen

Beispiel: app.vue bearbeiten

<template>
  <div>
    <h1>Willkommen bei Nuxt 3!</h1>
    <p>Mein erstes Nuxt-Projekt 🎉</p>
  </div>
</template>

---

2.5 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Welche Vue 3 & JavaScript-Grundlagen erforderlich sind
• ✅ Wie man VS Code mit den richtigen Erweiterungen einrichtet
• ✅ Node.js 18+ und Paketmanager (pnpm/npm/yarn) installiert
• ✅ Den Nuxt 3 Playground zum Experimentieren genutzt

Nächste Schritte: Im nächsten Kapitel erstellen wir unser erstes echtes Nuxt-Projekt und untersuchen die Verzeichnisstruktur im Detail.

---

📚 Weiterführende Ressourcen

• Vue 3 Dokumentation
• Node.js Dokumentation
• pnpm Dokumentation
• VS Code Erweiterungen für Vue

---

Nächstes Kapitel: Kapitel 3: Nuxt-Projekt erstellen & Verzeichnisstruktur →