Vue CLI

Installation

via node.js / npm

sudo npm install -g @vue/cli

Basics

vue create

vue create my-vue-project

Erstellt ein vue Projekt mit einigen Zusatztools. Der Assistent ermöglicht die Auswahl von verschiedenen Optionen z.B.

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Wenn das Projekt erstellt ist gibt Dir Vue auch den Code aus mit dem du starten kannst:

 $ cd my-first-vue-cli
 $ npm run serve

npm run server führt die passenden Skripte aus und startet den integrierten npm Server.

Achtung: Der npm Server ist von überall im Lokalen Netz mit der passenden IP erreichbar. Nach beenden der Arbeit solltest du den Server unbedingt mit

ctrl + c beenden.

Am besten ist ein abgesichertes Netzwerk.

Überblick über das erzeugte Projekt

package.json

Enthält wie immer in npm die Projektkonfiguration, die auch schon mit npm run serve genutzt wurde. Darin sind z.B.

scripts -> die für unser Projekt definierten Skripte
dependencies -> Abhängigkeiten also z.B. Libs, die automatisch zum Projekt hinzugefügt werden
devDependencies -> Abhängige Packages die nur während der Entwicklung genutzt werden
/node_modules -> npm lädt alle Packages aus den Dependencies (und deren Dependencies) und speichert sie hier.
/public -> Enthält im Wesentlichen die Start Datei index.html

/src/ -> Enthält den eigentlichen Vue Code der App. 
/src/main.js -> initialisiert die App (vereinfacht gesagt das neue createApp())
/src/App.vue -> .vue Dateien ermöglichen Template, Script und Style von Komponenten einfach zu pflegen. Sie werden vom CLI Kompiliert

Build Workflow

Wenn man mit dem CLI arbeitet schreibt man keinen Code der direkt im Browser angezeigt werden kann. Stattdessen kann man

• neue "moderne" JavaScript Features nutzen z.B. kann TypeScript genutzt werden.
• Vue spezifische Syntax nutzen

In einem Build-Prozess wird dann Code erzeugt, der vom Browser gelesen werden kann. Am Ende der Entwicklung wird auf dem regulären Host nur der finale Code installiert.

Wenn wir mit

npm run serve

den Server starten wird (siehe package.json) ein Skript gestartet, dass neben dem Webserver auch eine Reihe von Tools startet die bei jeder Änderung des Codes den Build Prozess in Gang setzen, so dass der Browser immer den aktuellen Code erhält.