Erster Umbau#
Start#
Mit diesem Beispiel werden die Grundsätzliche Struktur einer OnePageApp und wesentliche Paradigmen des Vue-Frameworks gezeigt. Nebenan schon einmal eine Momentaufnahme der endgültigen Version.
Lernziel#
über einen Button werden Zufallszahlen generiert
Die Ausgabe wird durch einen Kommentar ergänzt
zu jeder Zahl wird das passende Bild gezeigt
Vorarbeiten#
Siehe auch Vue3-Projekt anlegen
neue virtuelle Umgebung (für Node und Vue)
neues Projekt: lotto angelegt
neues Projekt: aktiviert und gestartet
Erster Umbau (App.vue)#
Logo austauschen,
ein paar Linien hinzufügen
und eine zum Thema passende Überschrift.
lotto1.vue#
Mit einer neuen Komponente »lotto1.vue« stellen wir den Inhalt um.
1<template>
2 <div>
3 <img src="../assets/lotto-zahlen/logo.png">
4 <h1>Deine Chance!</h1>
5 </div>
6</template>
App.vue anpassen#
Die alten Zeilen sind nicht gelöscht, sondern durch Kommentare deaktiviert. Deaktivierte wie neue Zeilen sind farblich hervorgehoben.
1<script setup>
2// import HelloWorld from './components/HelloWorld.vue'
3// import TheWelcome from './components/TheWelcome.vue'
4import Lotto from './components/lotto1.vue'
5</script>
6
7<template>
8 <header>
9 <!--img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /-->
10
11 <div class="wrapper">
12 <!--HelloWorld msg="You did it!" /-->
13 <Lotto />
14 </div>
15 </header>
16
17 <main>
18 <!--TheWelcome /-->
19 <p>Mehr Inhalte ... </p>
20 </main>
21</template>
Protokoll#
Hier noch einmal die Liste aller Dateien die geändert und/oder umbenannt und von git für den nächsten commit registriert wurden.
neue Datei: assets/lotto-zahlen/logo.png
geändert: src/App.vue
ignoriert/deaktiviert: src/components/TheWelcome.vue
ignoriert/deaktiviert: src/components/HelloWorld.vue
ignoriert/deaktiviert: src/components/WelcomeItem.vue
neue Datei: src/components/lotto1.vue
Nach dem Umbau#
