lotto1
Projekt: Lotto -- Start
Mit diesem Beispiel werden die Grundsätzliche Struktur einer OnePageApp und wesentliche Paradigmen des Vue-Frameworks gezeigt. Hier schon einmal eine Momentaufnahme der endgültigen Version:

- Ziel
über einen Button werden Zufallszahlen generiert
Die Ausgabe wird durch einen Kommentar ergänzt
zu jeder Zahl wird das passende Bild gezeigt
- Vorarbeiten
Erstinstallation
neue virtuelle Umgebung (für Node und Vue)
neues Projekt: vue-tut-lotto
Das Ergebnis ist folgende Struktur:

Projekt starten
cd vue-tut-lotto npm run dev
Wer ist mit wem verbandelt, eine Umbenennungsaktion macht die Verbindungen sichtbar:
Aus Hallo.vue wird lotto.vue
Das gibt den ersten Fehler und den Hinweis, womit Hello.vue verbunden war. Unwesentliche Informationen habe ich weggekürzt... Fehler können in der Konsole oder im Browser angezeigt sein. Hier der Fehler auf der Konsole:
ERROR in ... App.vue Module not found: Error: Cannot resolve 'file' or 'directory' ./components/Hello ... ./src/App.vue 7:13-42
Und hier der Fehler im Browser:
Cannot GET /
Namen in App.vue korrigieren
Wie wird die Komponente Hello.vue (jetzt lotto.vue) eingebunden? Wir sehen in dieser Datei auch die typische Struktur einer Vue-Komponente. Jede dieser Dateien besteht aus einem Template-, Skript- und Style-Block. Hier passen wir nun die Namen auf unsere Lotto-App an. Es soll aber nicht nur der Dateiname angepasst werden, auch die Komponente soll dem Zweck entsprechend, von Hello in Lotto umbenannt werden.
<template /> <script> import Lotto from './components/lotto' export default { name: 'app', components: { Lotto } } </script> <style />
Namen in lotto.vue korrigieren
An zwei Stellen taucht der Name hello noch auf. Tauschen Sie ihn gegen lotto aus. Diesmal gibt es keine Fehler, aber der Inhalt erscheint nicht!
<script> export default { name: 'lotto', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
Wir haben den Namen der Komponente festgelegt, der wie ein HTML-Element verwendet werden kann, aber wo geschieht das?
Komponente verwenden
Die Komponente hello haben wir in lotto.vue von hello in lotto umbenannt und deshalb müssen wir diesen Namen auch in den Templates so verwenden.
- Alt
-
<template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template>
- Neu
-
<template> <div id="app"> <img src="./assets/logo.png"> <lotto></lotto> </div> </template>
Zusammenfassung
-
Eine Komponente ist eine Datei die aus drei Teilen besteht:
Template
Script
CSS
-
Wenn eine Komponente von einer anderen verwendet werden soll, muss sie:
importiert werden
und in components bekannt gemacht werden
Für die Lotto-App sind das die Dateien:
components/lotto.vue
App.vue
Wo wird dann aber App.vue eingebunden?
Schaun wir uns die Dateien main.js und index.html an. In der index.html gibt es nur eine ID: app und genau das ist der Einstiegspunkt für die Vue-Applikation.
<div id="app"></div>
In Main finden wir den Bezug zur ID wieder (siehe el: '#app'):
import Vue from 'vue' import app from './app' /* eslint-disable no-new */ new Vue({ el: '#app', template: '<app/>', components: { app } })
Wie kommt die Verbindung zu main.js zustande?
Das soll uns erst einmal nicht interessieren, aber wenn Sie es ganz genau wissen wollen, dann öffnen Sie schon einmal die Datei webpack.base.conf.js, dort finden Sie den Namen und dort wird auch der Einstiegspunkt für Webpack definiert.