Erste Schritte mit Vue CLI

  • 2 Minuten

Vue CLI bietet eine Reihe von Tools für die Entwicklung, einschließlich Projekt-Grundgerüst, Entwicklungsserver und schneller Prototypenerstellung. Sie hilft Ihnen, schnell eine Starter-Anwendung zu erstellen, sodass Sie sich auf das Programmieren konzentrieren können und sich nicht mit der Konfiguration von Bibliotheken und anderen Einstellungen befassen müssen.

Bootstrapping

Das Kernnutzungskonzept der Vue CLI ist das Bootstrapping einer Anwendung. Das Erstellen-Skript bietet einen Assistenten, bei dem Sie aus einigen der gängigsten Konfigurationen auswählen können, darunter:

  • Linting-Optionen: Stellt sicher, dass der gesamte Code optisch konsistent wirkt. Diese Optionen können auch beim Finden von Fehlern helfen.
  • Anwendungstyp: Sie können sich für dafür entscheiden, Unterstützung für Web-Apps hinzuzufügen.
  • Babel-Unterstützung: Die Aufgabe von Babel ist es, neuere JavaScript-Syntax in ältere Formen von JavaScript zu konvertieren, falls Ihre App in älteren Browsern verwendet werden soll.
  • Sprache: Wählen Sie JavaScript oder TypeScript aus. Eine der beiden Optionen ist verwendbar, wobei TypeScript Ihnen neben weiteren Features Typen bietet und möglicherweise eine gute Option darstellt, wenn Ihre Anwendung an Umfang zunimmt. Vue selbst ist in TypeScript geschrieben.

Buildprozess

Vue CLI ist für die Arbeit mit Einzeldatei-Vue-Komponenten oder .vue-Dateien konzipiert. Ein Modul-Bundler oder Bundler verwaltet den Prozess der Typumwandlung der spezialisierten Syntax in Vue-Dateien in die entsprechenden JavaScript-, HTML- und CSS-Dateien, sodass Browser die Dateien lesen können.

Vue CLI verwendet WebPack als Standard-Bundler. Die Standardkonfiguration von WebPack ist für die meisten Szenarien geeignet. Mithilfe der Vue CLI können Sie die erforderlichen Schritte zum Konfigurieren eines Bundlers überspringen und stattdessen das bereitgestellte Setup verwenden.

Development Server

Beim Entwickeln verschiedener Anwendungstypen ist oft Ausprobieren gefragt. Sie nehmen Änderungen vor, laden die Seite im Browser, testen sie und nehmen dann weitere Änderungen vor. Diesen Vorgang wiederholen Sie so lange, bis alles wie gewünscht funktioniert.

Hierbei möchten Sie die Anzahl der an diesem Vorgang beteiligten Schritte sicherlich minimieren. Um die Entwicklung zu optimieren, bringt Vue CLI einen Development Server mit. Jedes Mal, wenn Sie eine Datei speichern, erkennt der Development Server diese Dateiänderungen. Er erstellt das Projekt nun neu und ermöglicht es Ihnen, die Seite im Browser zu testen.