Single-Page-Application

Übungsaufgaben zu Vue Router und Continuous Integration: Routen lesen, Gesuch-Detailseite, Pipeline aufbauen und Fehler finden

Die Web-App des Mitfahrlabors bekommt Seiten für die Mitfahrgesuche und eine Pipeline. In diesen Übungen bestimmst Du zu Adressen Route, Parameter und Props, baust test-first eine Detailseite für ein Gesuch mit eigener Route, teilst eine Pipeline in Stages mit Cache, Testbericht, Artefakten und Release-Job auf und findest anhand von Job-Protokollen heraus, warum eine Pipeline rot ist.

Vue Router und Continuous Integration: Detailseite, Pipeline und das erste Small Release der Vue-App

Die Fahrtensuche des Mitfahrlabors bekommt eine zweite Seite: Ein Klick auf „Details“ führt zur Detailseite unter /angebote/4. Dafür kommt Vue Router ins Projekt, mit Routentabelle, Routenparametern, RouterLink, RouterView und einer Seite für unbekannte Adressen, alles testgetrieben. Danach setzt das Team die XP-Praktik Continuous Integration um: ESLint prüft den Code, und eine Pipeline in GitLab führt bei jedem Push Lint, Typprüfung, Tests und Build aus. Zum Schluss geht mit Version 0.1.0 das erste Small Release an den Kunden, mit Changelog und automatisch erzeugtem Release.