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.

Single File Components (.vue)

.vue Dateien kannst Du nur zusammen mit dem Vue Command Line Interface nutzen. Das CLI kompiliert die Dateien in regulären JavaScript Code.

Wie der Name schon sagt kann man mit den .vue Dateien Components erzeugen. Das Funktioniert viel einfacher als wenn man die templates für die Vue Komponenten mit dem template Object einschleusen müßte. Dafür benötigt man das Vue CLI Tool das "behind the scenes" den finalen Code erzeugt.

Sinnvoll ist ein Syntaxhighlighter. Für VS ist z.Zt. (2020) Vetur das Must Have Plugin. Es geht weit über simples Syntaxhighlighting hinaus.

Exkurs: Dependencies in Visual Code installieren

• In VSC das Terminal öffnen (ist im Prinzip das System-Terminal hat aber den Vorteil, dass man nicht erst ins passende Verzeichnis navigieren muss)
• npm install
• npm run serve

Import .vue Files

Projekte mit dem CLI haben ein main.js File in das man das .vue File mit dem JavaScript import Statement importiert.

import ...  from './pfad/file'; // import from file path

In main.js sieht es meistens so aus:

import { createApp } from 'vue'; // import a {nameExport} from vue package defined in package.json
import App from './App.vue'; // import a 'export default' convention is to store it in App 

Beispiel:

App.vue

<script>
export default { // this is the export default we will import
    data(){ return { myVar:'Hello World' } }
}
</script>

main.js

import { createApp } from 'vue'; // import vue
import App from './App.vue'; // App now contains the export default object
createApp(App).mount('#app'); // create the app with that object

Aufbau von .vue Dateien

Die Single File Components fassen template, script und style Daten zusammen. In einer Datei werden diese Teile in Tags eingebaut.

Beispiel: app.vue

<template>

<section>
    <header><h1>My Friends</h1></header>
    <new-friend @add-friend="addFriend"></new-friend>
    <ul>
         <friend-contact 
         v-for="friend in friends"
         :key="friend.id"
         :id="friend.id"
         :name="friend.name" 
         :phone-number="friend.phone" 
         :email-address="friend.email"
         :is-favourite="friend.isFavourite"
         @toggle-favourite="toggleFavouriteState"
         @delete="deleteContact">
         </friend-contact>
    </ul>
</section>

</template>

<script>
import FriendContact from './components/FriendContact.vue'
import NewFriend from './components/NewFriend.vue'
export default {
  components: { 
      FriendContact,
      NewFriend
    }, 
    data(){

    },
    methods:{

    }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
* {
  box-sizing: border-box;
}

/*...*/
</style>