Die VueJS CLI ist aus meiner Arbeit nicht mehr weg zu denken. Es ist eine großartige Möglichkeit mit VueJS Web-Anwendungen zu designen, die erstellten Komponenten können nachher dann wiederverwendet werden. Ich verwende VueJS auch in meinen Web-Anwendungen auf Basis von Java und Golang. Gerade am Anfang stellen sich viele Programmierer die Frage wie beides hier zusammenspielt.

Einführung

Zuerst erstellen wir uns eine Vue App und nutzen NPM (https://www.npmjs.com/get-npm). NPM ist ein Paketverwalter und muss vorher installiert werden (folgt dem Link). Öffnet eine neue Eingabeaufforderung und installiert die Vue CLI:

npm install -g @vue/cli

Danach erstellen wir in einem Ordner eurer Wahl ein neues Vue Projekt. Wählt fürs erste Default aus.

vue create hello-world

In dem Verzeichnis sollte nun ein neuer Ordner hello-world mit der folgenden Struktur erschienen sein.

Damit alle benötigten Bibliotheken geladen werden müsst ihr folgendes im neu angelegten Verzeichnis eingeben:

npm install

Nun kann man gleich loslegen die App zu gestalten. Im src Verzeichnis schreibt ihr euren Quellcode, im public Verzeichnis findet ihr die aus eurem Quellcode realisierte Single Page App (SPA). Eine Anwendung bei der eure späteren Benutzer nicht mehr woanders hin wechseln müssen, um zu anderen Inhalten zu gelangen.

Produktive Nutzung

Wie arbeitet ihr später produktiv mit der index.html im public Ordner? Gar nicht. Ihr müsst eine produktive Version eurer Anwendung bauen. Dies tut ihr mit dem Befehl:

npm run build

Nun ist ein weiteres Verzeichnis (dist) dazu gekommen.

Genau damit werden wir arbeiten. Die dort hinterlegten Dateien verlinken wir in unserem Backend zu Auslieferung an den Kunden.

Praxis-Tipp

Nun ist es sehr aufwändig bei jeder Änderung die ganze Anwendung neu erstellen zu lassen (äquivalent zu npm run serve bei der Entwicklung). Es gibt eine Möglichkeit sich die Anwendung dann neu erstellen zu lassen. Ändert dazu eure package.json ab:

"scripts": {
  "dev":"vue-cli-service build --watch",
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

Danach könnt ihr in dem Ordner hello-world mit dem Befehl

npm run dev

eure Änderungen automatisiert in den produktiven dist Ordner überführen lassen. Das ist insbesondere dann sinnvoll wenn eure App nicht nur über Tokens arbeitet, sondern zum Beispiel über Sessions. Die Anwendung wird dann immer mit euren aktuellen Änderungen angezeigt und muss nicht über den npm Webserver laufen (npm run serve).