Komplexe Webanwendungen mit Vue.js, Teil 1

Inhaltsverzeichnis

Vue.js hat Erstaunliches geschafft. Vom ehemaligen Google-Mitarbeiter Evan You gestartet, hat sich das Web-Framework von einem Nischenprodukt zu einer Alternative auf Augenhöhe mit React und Angular entwickelt. Vue.js verbindet konzeptionell viel mit den genannten Frameworks, aber es interpretiert bewährte Konzepte auf eigene Weise und setzt individuelle Schwerpunkte.

Der Artikel "Vue.js: Zeitgemäße und wartbare JavaScript-Client-Anwendungen" hat das Framework vorgestellt und einen ersten Überblick gegeben. Dieser Artikel geht nun weiterführende Konzepte und Herangehensweisen für komplexe Anwendungen an. Denn – so viel sei vorweg gesagt – mit Vue.js lassen sich auch größere Projekte erfolgreich umsetzen.

Ein Projekt initialisieren

Entwickler können Vue.js als JavaScript-Bibliothek ohne weitere Abhängigkeiten direkt im Browser einsetzen. Für größere Projekte kommt jedoch üblicherweise ein webpack-Template zum Einsatz. Ein neues Projekt erstellt man am einfachsten mit dem Werkzeug Vue CLI und erhält ein nach Best Practices vorkonfiguriertes Projekt. Es hat vor kurzem ein größeres Upgrade auf Version 3.0 erhalten und ist nun flexibler als die vorhergehende Variante.

In einem frischen Projekt wird unterhalb des src-Ordners folgender Inhalt erzeugt:

Die Datei main.js ist der Einstiegspunkt in die Anwendung. Folgender Code initialisiert sie:

new Vue({
  render: h => h(App)
}).$mount('#app')

new Vue erzeugt die Root-Instanz und übergibt ihr ein Konfigurationsobjekt. Darin ist eine Renderfunktion definiert, die die App-Komponente ausgibt. Die erstellte Root-Instanz wird dann an das DOM-Element mit der ID app gebunden. Diese Datei initialisiert und registriert in einer größeren Anwendung typischerweise noch andere Module, zum Beispiel den Router, Vuex-Stores und Plug-ins.

In der Single File Component (SFC) App.vue sind Template, Logik und CSS für die oberste Komponente in der Komponentenhierarchie definiert. In einer realen App steht hier häufig der Platzhalter für den Router. Zur Laufzeit ersetzt der Router den Platzhalter durch den Inhalt der aktuellen Seite.

<template> 
  <div id="app"> 
    <img src="./assets/logo.png"> 
    <HelloWorld msg="Welcome to Your Vue.js App"/> 
  </div> 
</template>
    
<script>
import HelloWorld from './components/HelloWorld.vue' // 1.
    
export default { // 2.
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>
    
<style>
#app {
  /* .. Styling .. */
}
</style>

1. Die Komponente HelloWorld wird explizit importiert. Alternativ könnte man sie global registrieren, aber das verringert die Übersichtlichkeit. Außer bei sehr generischen Komponenten sind explizite Importe zu bevorzugen.
2. Das Konfigurationsobjekt der Komponente wird als JavaScript-Modul exportiert. Es konfiguriert alle Aspekte der Komponente. Das Beispiel vergibt nur einen Name und registriert HelloWorld.