Kapitel 4: Node.js und Paketmanager installieren

📘 Lernziel: Node.js, npm und pnpm installieren und konfigurieren!

---

4.1 Was ist Node.js?

Node.js ist eine JavaScript-Laufzeitumgebung für den Server.

Warum brauchen wir Node.js für Vue?

• Um Vue-Projekte zu erstellen (Vite)
• Um Pakete zu installieren (npm/pnpm)
• Um einen lokalen Entwicklungsserver zu starten

Überprüfen ob Node.js installiert ist:

node --version
npm --version

---

4.2 Node.js Installation

Download:

• Offizielle Website: https://nodejs.org/
• LTS Version empfohlen (Long Term Support)

Installation (Windows):

1. Download die .msi Datei (LTS Version)
2. Doppelklick zum Installieren
3. Folge den Installationsschritten
4. ✅ Aktiviere "Automatically install necessary tools"

Nach der Installation:

# Überprüfe die Installation
node --version   # z.B. v20.x.x
npm --version    # z.B. 10.x.x

---

4.3 npm Grundlagen

npm (Node Package Manager) ist der Standard-Paketmanager für Node.js.

Wichtige Befehle:

# Paket installieren (lokal)
npm install paket-name

# Paket installieren (global)
npm install -g paket-name

# Paket als Entwicklungsabhängigkeit installieren
npm install --save-dev paket-name

# Pakete aus package.json installieren
npm install

# Skript ausführen
npm run script-name

package.json:

{
  "name": "mein-projekt",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0"
  }
}

---

4.4 pnpm Installation und Vorteile

pnpm ist eine Alternative zu npm mit Vorteilen:

• ✅ Schnellere Installation
• ✅ Weniger Speicherplatz
• ✅ Strengere Abhängigkeitsverwaltung

Installation:

# Global installieren
npm install -g pnpm

# Überprüfe die Installation
pnpm --version

pnpm Befehle (ähnlich wie npm):

# Paket installieren
pnpm install paket-name

# Alle Pakete installieren
pnpm install

# Skript ausführen
pnpm run script-name

Vue 3 Projekte nutzen oft pnpm!

---

4.5 Konfiguration und Problembehandlung

Proxy konfigurieren (für China/Unternehmen):

# npm Proxy setzen
npm config set proxy http://proxy.example.com:8080
npm config set https-proxy http://proxy.example.com:8080

# pnpm Proxy setzen
pnpm config set proxy http://proxy.example.com:8080

Probleme beheben:

# npm Cache leeren
npm cache clean --force

# pnpm Cache leeren
pnpm store prune

# Permissions-Probleme (macOS/Linux)
sudo npm install -g paket-name

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Was Node.js ist und warum wir es brauchen
• ✅ Node.js installieren
• ✅ npm Grundlagen
• ✅ pnpm installieren und nutzen
• ✅ Konfiguration und Problembehandlung

🎯 Nächster Schritt: In Kapitel 5 erstellst du dein erstes Vue 3 Programm!

---

← Zurück zu Kapitel 3: EntwicklungsumgebungWeiter zu Kapitel 5: Erstes Vue 3 Programm →