install
Projektstart/Installation
- ::
-
cd <vue-entwicklungsumgebung> source ./bin/activate vue init webpack saammelsurium cd saammelsurium npm install npm run dev
Kopieren
Kopieren sie die folgenden Dateien aus den vorangegangenen Lektionen in das neue Projekt:
berlinclock.vue
lotto.vue
Vergessen Sie nicht die dazugehörigen Ordner mit den Bilder in den static-Ordner zu kopieren. Die Ordner-Struktur sieht dann etwa wie folgt aus:

Vorbereitung der Menüs und Routen
Nun folgen die ersten Anpassungen in main.js, wir übernehmen die Struktur aus der Dokumentation zum vue-router-Projekt. Zwei Änderungen sind dann noch notwendig:
der Import des Moduls (Zeilen 6+7)
die Verwendung von Namen (Zeilen 21-23) für die Routen (named routes). Diese Namen werden dann weiter unten auch verwendet.
in App.vue müssen die CSS-Formate für die Listen übernommen werden, erst danach sieht das minimalistische Menü, wie ein Menü aus. Auf den template-Block verzichten wir auch, weil der jetzt für alle Komponenten einheitlich in main.js definiert ist.
vue/vue-routes/001/main.js (Source)
vue/vue-routes/001/App.vue (Source)
<script> export default { name: 'app' } </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; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
Ein erster Eindruck von dem Sammelsurium
