Das JavaScript-Framework Vue.js, Teil 2 Ein Projekt per Vue CLI anlegen

Von Dr. Dirk Koller

Anbieter zum Thema

Dieser Vue-Beitrag wird bereits etwas Tool-lastiger: Mit Vue CLI, dem Command Line Interface, generieren wir eine komplette Anwendung und schauen uns an, wie die einzelnen Bestandteile zusammenhängen.

Erster Start der Vue.js-App im Entwicklungsserver.
Erster Start der Vue.js-App im Entwicklungsserver.
(Bild: Dr. Koller / Vue.js )

Für unser Beispiel vorausgesetzt werden die JavaScript-Laufzeitumgebung Node.js und der zugehörige Paketmanager Node Package Manager (npm). Die Installation ist auf der Produktseite beschrieben und soll hier nicht weiter besprochen werden. Mit den Befehlen „node -v“ und „npm -v“, lässt sich in der Kommandozeile überprüfen, ob und in welcher Version die Software auf dem Rechner vorliegt.

Ein Projekt anlegen

Größere Vue-Projekte bestehen aus vielen Dateien und werden deshalb üblicherweise nicht von Hand, sondern per Vue Command Line Interface (CLI) aufgesetzt. Die Installation des Werkzeuges erfolgt global (projektübergreifend) mit dem folgenden Befehl:

npm install -g @vue/cli

Auf Mac- oder Linux-Rechnern wird das Kommando mit sudo-Rechten eingegeben. Nach der erfolgten Installation zeigt der Befehl …

vue –version

… wie gewohnt die Version an.

Das erste Projekt, mit dem Namen hello-vue, wird im Terminal mit dem folgenden Kommando angelegt:

vue create hello-vue

Projekt anlegen mit vue-create.
Projekt anlegen mit vue-create.
(Bild: Dr. Koller / Vue.js )

Das CLI fragt anschließend die gewünschten Features ab. Unter „Manually select features“ finden sich reichlich Optionen, mit denen sich die Anwendung ausstatten lässt. Im Moment ist „Default (Vue 3)“ zum Nachvollziehen der folgenden Erläuterungen aber eine gute Wahl.

Das Vue-Projekt in VS Code.
Das Vue-Projekt in VS Code.
(Bild: Dr. Koller / Vue.js )

Das CLI legt daraufhin die Projektdateien an und installiert die Pakete, die zuvor aus dem Netz geladen werden. Wenn der Prozess abgeschlossen ist, empfiehlt sich ein Blick auf die generierten Dateien. Es gibt eine Menge guter Editoren und Entwicklungsumgebungen für JavaScript.

Wir verwenden hier den beliebten und kostenlosen Editor Visual Studio Code (VS Code). Mit „File > Open Folder…“ wird damit der neue Ordner hello-vue geöffnet. In der Explorer-Ansicht auf der linken Seite werden die enthaltenen Dateien in einer hierarchischen Ansicht aufgelistet.

Rundgang durchs Projekt

Wie man an der Abbildung erkennen kann, sind das schon einige Dateien. Je nach Auswahl der Features können es noch mehr werden. Zum Glück sind für den Einstieg nicht alle relevant, so dass hier erst einmal nur die wichtigsten besprochen werden. Im Verlauf der Reihe wird aber noch die ein- oder andere zusätzliche Datei vorgestellt.

Vue-CLI-Projekte basieren auf Node, deshalb finden sich die Dateien package.json mit der Projektbeschreibung und den Abhängigkeiten, die Datei package-lock.json mit den tatsächlich verwendeten Versionsnummern und der Ordner node_modules mit den geladenen Bibliotheken im Projekt-Ordner.

Mit Frameworks wie Vue erstellt man typischerweise Single Page Applications (SPA), die Datei index.html ist diese eine Seite. Erwähnenswert darin ist lediglich das vom vorherigen Beitrag bekannte div-Element mit der id „app“. Hier wird der dynamische Inhalt eingebunden, den das Vue-Framework generiert:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Die JavaScript-Datei main.js sorgt dafür, dass diese Magie funktioniert. Ihre Aufgabe ist das Erzeugen und Mounten der App. Auch das sollte bereits bekannt sein:

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Grundlegend Neues gibt es dann aber in der Datei App.vue. Bei der Datei handelt es sich um eine sogenannte Singe File Component. In einer einzigen Datei sind hier Template, Programmcode und Style-Anweisungen enthalten. Bei dem Format scheiden sich die Geister. Im konkurrierenden Framework Angular sind diese drei Teile auf verschiedene Dateien verteilt, beide Varianten haben Vor- und Nachteile:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue-Komponenten sind die wichtigsten Bausteine des Frameworks. Ausgehend von der Root-Komponente App wird ein ganzer Baum aus Komponenten aufgespannt, der die Anwendung bildet.

Was dabei zu einer Komponente zusammengefasst wird, liegt im Ermessen des Entwicklers. Oft handelt es sich dabei um geroutete „Seiten“ der Single Page-Applikation. Auch gemeinsame Bestandteile wie Tabellen, Header, Footer oder das Menü werden in Komponenten ausgelagert.

Wie man der Definition der Komponente mithilfe des hinter export default aufgeführten Objekts entnehmen kann, haben Komponenten einen Namen. Die Komponente App bindet hier lokal eine weitere Komponente namens HelloWorld ein. Sie ist in der Datei HelloWorld.vue zu finden und wird in der Parent-Komponente (hier also App) unter components aufgelistet.

Auf eine Wiedergabe des Inhalts von HelloWorld.vue wird verzichtet, auch diese Datei enthält die drei Bestandteile template, script und style. Neben name und components lassen sich noch weitere Objekte wie die data()-Funktion, Methoden, Computed Properties, Lifecycle-Methoden und einiges mehr angeben.

Beachtenswert ist noch die Verwendung der HelloWorld-Komponente im Template von App. Die Komponente wird über einen gleichnamigen Tag eingebunden. Im vorliegenden Fall werden noch Daten an die Child-Komponente übergeben, aber das soll hier nicht weiter interessieren:

<HelloWorld msg="Welcome to Your Vue.js App"/>

Start im Entwicklungsserver

VS Code verfügt über ein integriertes Terminal, das sich mit Terminal > New Terminal öffnen lässt. Danach befindet man sich direkt im Ordner des momentan geöffneten Projekts. Hier wird nun mit folgender Eingabe der Entwicklungsserver gestartet:

npm run serve

Der erste Start im Entwicklungsserver.
Der erste Start im Entwicklungsserver.
(Bild: Dr. Koller / Vue.js )

Nach Hochfahren des Servers lässt sich die Anwendung im Browser unter http://localhost:8080 öffnen. Zu sehen sind Informationen zu Vue aus der Komponente HelloWorld. Ein Produktions-Build der Anwendung wird mit folgender Eingabe gestartet:

npm run build

Der Code findet sich danach im Ordner dist und kann von dort auf einen Webserver verschoben werden. Das CLI bietet neben dem create-Kommando natürlich noch weitere Funktionen, sie sind im Vue-CLI-Guide ausführlich beschrieben.

(ID:47894676)