Modul 1: Einstieg

Projekt aufsetzen

In wenigen Minuten vom leeren Terminal zum laufenden Vue-Projekt — Schritt für Schritt erklärt.

Voraussetzungen

Bevor wir starten, brauchst du folgende Tools auf deinem Rechner:

Node.js (Version 18 oder höher) — die JavaScript-Runtime
npm (kommt mit Node.js) — der Paketmanager
Einen Code-Editor — wir empfehlen VS Code mit der Vue-Extension „Volar"

Terminal

# Node.js Version prüfen
node --version
# Sollte v18.x oder höher anzeigen

npm --version
# Sollte 9.x oder höher anzeigen

🛤️

Ruby-Umgebung vs. Node-Umgebung

In Rails brauchst du Ruby, Bundler und ggf. eine Datenbank. In der Vue-Welt brauchst du Node.js und npm. Kein Ruby, kein Bundler, keine Datenbank — nur JavaScript. Falls du nvm oder asdf für Ruby nutzt: Beide können auch Node.js verwalten.

Projekt erstellen mit create-vue

create-vue ist das offizielle Scaffolding-Tool für Vue-Projekte. Es erstellt ein vorkonfiguriertes Projekt mit Vite als Build-Tool.

Terminal

npm create vue@latest

Nach dem Ausführen fragt dich das Tool interaktiv nach deinen Wünschen:

Terminal — Interaktiver Dialog

✔ Project name: … mein-vue-projekt
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Vue DevTools 7 extension for debugging? … Yes

🛤️

rails new vs. create-vue

rails new gibt dir ein vollständiges MVC-Framework mit Datenbank, Mailer, Active Job und mehr. create-vue gibt dir nur das Frontend: Komponenten, Routing und State Management. Für ein Backend brauchst du eine separate API — z.B. eine Rails-API.

Was bedeuten die Optionen?

TypeScript

Statische Typisierung für JavaScript. Fängt Fehler zur Entwicklungszeit ab statt zur Laufzeit. Besonders bei größeren Projekten unverzichtbar.

Rails-Analogie: Wie Sorbet oder RBS für Ruby — aber viel verbreiteter im JS-Ökosystem.

JSX Support

Erlaubt HTML-ähnliche Syntax direkt in JavaScript-Funktionen. Wird hauptsächlich in React verwendet. In Vue ist das Template-System (<template>) üblicher und empfohlen.

Empfehlung: Nein — Vue-Templates sind ausdrucksstärker und besser tooling-unterstützt.

Vue Router

Das offizielle Routing-System für Vue. Ordnet URLs zu Komponenten zu — genau wie routes.rb in Rails URLs zu Controller-Actions zuordnet.

Rails-Analogie: config/routes.rb — aber alles läuft im Browser.

Pinia

State Management für Vue. Verwaltet Anwendungszustand, der über mehrere Komponenten geteilt wird — z.B. der angemeldete User oder ein Warenkorb.

Rails-Analogie: Wie Session-Daten oder globale Current-Objekte, aber reaktiv und im Browser.

Vitest

Ein schnelles Test-Framework, das perfekt mit Vite zusammenarbeitet. Schreibt sich ähnlich wie RSpec oder Minitest — mit describe, it und expect.

Rails-Analogie: RSpec/Minitest für deine Vue-Komponenten und Composables.

ESLint + Prettier

ESLint findet Code-Probleme (wie RuboCop), Prettier formatiert den Code automatisch. Zusammen sorgen sie für konsistenten, fehlerfreien Code.

Rails-Analogie: RuboCop (Linting) + .editorconfig (Formatierung).

Abhängigkeiten installieren und starten

Nach dem Erstellen des Projekts müssen die Abhängigkeiten installiert werden — ähnlich wie bundle install in Rails:

Terminal

# In den Projektordner wechseln
cd mein-vue-projekt

# Abhängigkeiten installieren (wie bundle install)
npm install

# Entwicklungsserver starten (wie rails server)
npm run dev

ℹ️

Was npm install tut

npm install liest die package.json (das Äquivalent zum Gemfile) und installiert alle Pakete in den Ordner node_modules/. Die genauen Versionen werden in package-lock.json gespeichert (wie Gemfile.lock).

Nach dem Start siehst du folgende Ausgabe:

Terminal — Ausgabe

  VITE v6.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Öffne http://localhost:5173 in deinem Browser. Du solltest die Vue-Willkommensseite sehen — dein Projekt läuft!

💡

Hot Module Replacement (HMR)

Vite unterstützt HMR: Wenn du eine Datei speicherst, wird die Änderung sofort im Browser sichtbar — ohne manuellen Reload. Das ist deutlich schneller als der Rails-Entwicklungszyklus mit Turbo oder Webpacker.

Befehle im Vergleich: Rails vs. Vue

Aufgabe	Rails	Vue / Vite
Neues Projekt	rails new app	npm create vue@latest
Abhängigkeiten	bundle install	npm install
Dev-Server	rails server	npm run dev
Tests	rails test / rspec	npm run test:unit
Linting	rubocop	npm run lint
Produktion bauen	rails assets:precompile	npm run build
Paket hinzufügen	bundle add gem_name	npm install paket

Was ist Vite?

Vite (französisch für „schnell") ist das Build-Tool hinter modernen Vue-Projekten. Es ersetzt ältere Tools wie Webpack oder das Rails-eigene Webpacker.

Vites Besonderheit: Im Entwicklungsmodus werden Dateien nicht gebündelt. Stattdessen werden ES-Module direkt an den Browser geliefert. Das macht den Entwicklungsserver extrem schnell — selbst bei großen Projekten.

package.json — Skripte

{
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \\"build-only {@}\\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  }
}

⚠️

node_modules nicht committen!

Der Ordner node_modules/ enthält alle installierten Pakete und kann hunderte Megabytes groß werden. Er gehört nicht ins Git-Repository. Die .gitignore von create-vue schließt ihn automatisch aus — genau wie Rails den vendor/bundle-Ordner ausschließt.

Zusammenfassung

Du brauchst Node.js 18+ und npm — kein Ruby, kein Bundler
npm create vue@latest erstellt ein neues Projekt interaktiv
TypeScript, Vue Router und Pinia sind die wichtigsten Optionen
npm install installiert Abhängigkeiten, npm run dev startet den Server
Vite sorgt für blitzschnelle Entwicklung mit Hot Module Replacement
Die Befehle sind Rails-Entwicklern vertraut — nur die Tools heißen anders