Philipp Munzert

Philipp schreibt zu Themen wie VueJS, JamStack, Produktentwicklung und Teamkultur.

Dienstag, 3. September

Setup eines VueJS Projektes mit der Vue CLI

Schnelles und einfaches Setup eines VueJS Projektes mithilfe der CLI

Um ein neues VueJS Projekt zu starten gibt es verschiedene Wege. Der einfachste und angenehmste Weg ist das Setup mithilfe der Vue CLI. Um die CLI nutzen zu können, müssen zuerst die notwendigen NPM Module global installiert werden. Dazu kann folgender Command im Terminal ausgeführt werden:

npm install -g @vue/cli

#oder 

yarn global add @vue/cli 

Läuft die Installation erfolgreich durch, steht danach ein neuer Command im Terminal zur Verfügung. Mit vue -v lässt sich beispielsweise prüfen, welchen Version der Vue CLI nun installiert ist.

Das Projekt Setup über die CLI

Um ein Projektsetup zu starten kann man nun mithilfe von vue create + den gewünschten Projektname den Setup-Prozess über das Terminal starten.

vue create vue-setup

Nach dem Command startet ein kleiner Wizard, der durch das Setup führt. Zunächst wird man gefragt, ob man die Konfiguration manuell durchführen oder das Standard-Setup das nur Babel und ESLint beinhaltet, nutzen möchte. Wir wählen zunächst manuell mit den Pfeiltasten und anschließender Leertaste um zu sehen, welche Möglichkeiten angeboten werden.

Im manuellen Modus erscheinen nun alle Optionen und Packages die genutzt werden können. Beispielsweise kann ich relativ schnell und simpel den Vue Router meinem Projekt dadurch hinzufügen. Aber auch das Setup für Unit- und End-to-End Testing lässt sich anwählen.

Nachdem die gewünschte Auswahl vorgenommen wurde, lässt sich die Installation des Projektes und der nötigen Packages starten.

Mithilfe der CLI UI ein visuelles Projektsetup

Sollte man nicht zu den Terminal-Liebhabern gehören, lässt sich mithilfe eines modernen Interfaces ebenso ein Projektsetup durchführen. Dazu startet man im Terminal zunächst die UI mit:

vue ui

Dadurch öffnet sich auf Port 8000 das Vue UI Interface. Über Project Create startet man den bereits aus der CLI gewohnten Prozess beim Initialisieren eines neuen Projektes.

Zunächst lässt sich über der Speicherort aussuchen und der Projektname angeben. Ebenso kann zwischen npm oder yarn als Standard Package Manager gewählt werden. Eine Festlegung ist aber kein Muss. Sind die Einstellung getroffen, wird auch hier der Wizard Prozess gestartet.

Auch über die UI kann ein manuelles Setup durchgeführt werden, wenn zum Beispiel schon während des Setups der Vue Router oder Vuex hinzugefügt werden sollen.

Nach dem erfolgreichen Setup ist man startklar und kann sein Vue Projekt weiterentwickeln.