Entwicklungsumgebung

Eine gut eingerichtete Entwicklungsumgebung ist die Grundlage für produktives Arbeiten mit Vue.js.

Runtime

Node.js, npm/pnpm

Editor

VS Code, WebStorm

Tools

Git, Terminal, DevTools

Node.js

Node.js ist die JavaScript-Runtime für Build-Tools, Dev-Server und Package Management.

Installation

• nodejs.org - LTS Version empfohlen
• Oder via Version Manager:

# nvm (Node Version Manager)
nvm install --lts
nvm use --lts

# fnm (schnellere Alternative)
fnm install --lts
fnm use --lts

Versionen prüfen

node --version
# v20.x.x oder höher

npm --version
# 10.x.x oder höher

Tipp

Vue 3 benötigt Node.js 18.3+

Package Manager

npm

# Inkludiert in Node.js
npm install
npm run dev

• Standard
• Größte Verbreitung

pnpm

npm install -g pnpm
pnpm install
pnpm dev

• Schneller
• Spart Speicherplatz
• Strikte Abhängigkeiten

yarn

npm install -g yarn
yarn install
yarn dev

• Etablierte Alternative
• Workspaces

Tipp

Empfehlung: pnpm für neue Projekte - schneller und effizienter

Editor: Visual Studio Code

VS Code ist der beliebteste Editor für Vue-Entwicklung mit exzellenter Unterstützung.

Installation

code.visualstudio.com

Wichtigste Extension

Vue - Official (ehem. Volar)

• Syntax Highlighting
• TypeScript-Unterstützung
• IntelliSense für Templates
• Fehlerprüfung

ext install Vue.volar

Empfohlene Extensions

Extension	Funktion
Vue - Official	Vue-Unterstützung
ESLint	Linting
Prettier	Formatierung
TypeScript Vue Plugin	TS in Templates
Auto Rename Tag	HTML-Tags

VS Code Einstellungen

settings.json

{
  // Vue-Dateien mit Volar formatieren
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },

  // TypeScript-Unterstützung in Templates
  "typescript.tsdk": "node_modules/typescript/lib",

  // Automatisch formatieren beim Speichern
  "editor.formatOnSave": true,

  // ESLint-Fixes beim Speichern
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // Emmet in Vue-Dateien
  "emmet.includeLanguages": {
    "vue": "html"
  }
}

Alternative: WebStorm / IntelliJ

Vorteile

• Vue-Unterstützung out-of-the-box
• Keine Extensions nötig
• Leistungsfähiges Refactoring
• Integrierter Debugger
• Git-Integration

Installation

jetbrains.com/webstorm

Achtung

Kostenpflichtig (aber kostenlos für Open Source)

Git

Git ist essentiell für Versionskontrolle und Zusammenarbeit.

Installation

# macOS
brew install git

# Windows
# git-scm.com/download/win

# Linux
sudo apt install git

Konfiguration

git config --global user.name "Name"
git config --global user.email "email@example.com"

GUI-Tools (optional)

• GitKraken - Plattformübergreifend
• Sourcetree - Atlassian (kostenlos)
• GitHub Desktop - Einfach für GitHub
• VS Code - Integrierte Git-Unterstützung

Tipp

VS Code’s Source Control Panel ist für die meisten Aufgaben ausreichend

Terminal

macOS / Linux

• Terminal.app (macOS)
• iTerm2 (macOS, empfohlen)
• GNOME Terminal (Linux)
• Warp (modern, AI-powered)

Windows

• Windows Terminal (empfohlen)
• PowerShell
• Git Bash (mit Git installiert)
• WSL (Linux-Subsystem)

VS Code Integriertes Terminal

Ctrl + ` (Backtick)

• Direkt im Editor
• Mehrere Terminals
• Split-Ansicht
• Automatisch im Projekt-Ordner

Browser

Empfohlene Browser

Chrome

• Beste DevTools
• Größte Verbreitung

Firefox

• Gute DevTools
• Datenschutz

Edge

• Chromium-basiert
• Windows-Integration

Wichtige DevTools-Features

• Elements/Inspector - DOM untersuchen
• Console - JavaScript-Fehler, Logs
• Network - API-Aufrufe überwachen
• Application - LocalStorage, Cookies
• Performance - Laufzeitanalyse

F12 oder Cmd/Ctrl + Shift + I

Vue DevTools

Die Vue DevTools sind essenziell für das Debugging von Vue-Anwendungen.

Empfehlung: In-Project Installation

npm install -D vite-plugin-vue-devtools

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [vue(), vueDevTools()]
})

Vorteile gegenüber Browser-Extension: Zuverlässiger, immer aktuell, funktioniert in allen Browsern

Features

• Components - Komponenten-Baum inspizieren, Props und State ansehen
• Pinia - Store-State inspizieren, Getters anzeigen
• Router - Aktuelle Route anzeigen, Navigation-Historie
• Timeline - Ereignisse aufzeichnen, Performance-Analyse

devtools.vuejs.org

Checkliste

Must-Have

• Node.js 18.3+ (LTS)
• Package Manager (npm/pnpm)
• VS Code + Vue Official Extension
• Git
• Moderner Browser

Empfohlen

• pnpm statt npm
• Vue DevTools (in-project)
• ESLint + Prettier
• TypeScript
• VS Code Settings Sync

Schnellstart

npm create vue@latest my-app
cd my-app && npm install && npm run dev