lotto1

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.