Vue Academy · Lektion

Vue CLI installieren

Installieren und verwenden Sie die Vue CLI, um neue Projekte zu erstellen

Vue CLI installieren ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was ist die Vue CLI?

Die Vue CLI ist das klassische Befehlszeilentool zum Erstellen und Verwalten von Vue-Projekten.

Erstellt Projekte mit sinnvollen Standardeinstellungen
Verwaltet die Build-Konfiguration über Plugins
Basiert auf webpack

Sie war viele Jahre lang der Standard, inzwischen wird bei modernem Vue jedoch Vite bevorzugt.

Vue CLI global installieren

Installieren Sie die CLI global, damit der Befehl vue überall verfügbar ist.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Ein Projekt erstellen

Verwenden Sie vue create, um ein neues Projekt zu erstellen. Dazu geben Sie einen Projektnamen an.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Presets auswählen

Die CLI fordert Sie auf, ein Preset auszuwählen:

Standard stellt Babel und ESLint bereit und ist der schnellste Weg
Funktionen manuell auswählen ermöglicht das Hinzufügen von Router, Vuex, TypeScript, Tests und mehr

Presets können für zukünftige Projekte gespeichert und wiederverwendet werden.

Funktionen manuell auswählen

Wenn Sie die manuelle Auswahl verwenden, aktivieren oder deaktivieren Sie die gewünschten Funktionen.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Das Projekt ausführen

Nach der Erstellung gibt die CLI die Befehle zum Starten Ihrer App aus.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Vite kommt ins Spiel

Vite ist das moderne Build-Tool, das vom Vue-Team entwickelt wurde.

Verwendet native ES-Module für einen sofortigen Start
Blitzschnelles Hot Module Replacement
Deutlich schneller als die auf webpack basierende Vue CLI

Vite ist inzwischen das empfohlene Tool für neue Vue-Projekte.

Vite und Vue CLI im Vergleich

So unterscheiden sich die beiden Tools:

Vue CLI verwendet webpack, startet beim ersten Mal langsamer und ist ausgereift sowie konfigurierbar
Vite verwendet esbuild und natives ESM, startet nahezu sofort und wird künftig standardmäßig eingesetzt

Die Vue CLI befindet sich inzwischen im Wartungsmodus. Bevorzugen Sie Vite, es sei denn, Sie verwalten ein älteres Projekt.

npm create vue@latest

Der offizielle Weg, ein neues Vue-Projekt mit Vite zu starten, ist das Tool create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Ein create-vue-Projekt ausführen

create-vue verwendet die standardmäßigen Vite-Skripte.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Welche Option sollten Sie verwenden?

Orientierungshilfe für Ihre Auswahl:

Beginnen Sie 2024 oder später mit einem neuen Projekt? Verwenden Sie npm create vue@latest (Vite).
Verwalten Sie ein älteres Projekt, das mit der Vue CLI erstellt wurde? Verwenden Sie sie weiterhin.
Wünschen Sie sich die schnellste Entwicklungsumgebung? Vite ist die bessere Wahl.

Schnelltest

Testen Sie Ihr Verständnis der Vue-Tools.

Zusammenfassung: Vue CLI installieren

Sie haben die Tools zum Erstellen von Vue-Projekten kennengelernt:

Vue CLI wird mit npm install -g @vue/cli installiert
vue create erstellt Projekte mithilfe von Presets
Vite ist die moderne, schnelle Alternative
npm create vue@latest ist der empfohlene moderne Einstieg

Als Nächstes sehen Sie sich die Struktur des erstellten Projekts an.

Häufig gestellte Fragen

Ist die Lektion „Vue CLI installieren“ kostenlos?

Ja — der vollständige Text von „Vue CLI installieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Vue CLI installieren“?

Installieren und verwenden Sie die Vue CLI, um neue Projekte zu erstellen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „Vue CLI installieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy