MiracleListVue: Vue.js Web Client für das MiracleList Backend

Autor: Dr. Holger Schwichtenberg, www.IT-Visions.de

Diese Webanwendung läuft zu Test- und Schulungszwecken live in der Cloud: http://miraclelist-vue.azurewebsites.net

Eingesetzte Techniken im Client: Vue.js 3, Vue CLI Vite, TypeScript, Bootstrap, Moment.js, Vuelidate, SignalR, vue.draggable, Vue-Toastification, Jest Vitest, Vue Test Utils, Nightwatch

Fachbuch

Das Vue.js-Buch zu diesem Code: Vue.js 3 Crashkurs

Branches

• Sprint 1: Ausgangszustand
• Sprint 2: REST-Dienste nutzen, Rendern von Daten mit Templates, Benutzerereignisse
• Sprint 3: Formulare, Zwei-Wege-Datenbindung, modalen Dialoge, Komponentenbildung
• Sprint 4: Authentifizierung, Anwendungszustand, Browserspeicher, Deployment und Lazy Loading
• Sprint 5: Design und User Experience
• Sprint 6: Automatisierte Tests (Unit Tests und Ende-zu-Ende-Tests)
• Main: Aktueller Entwicklungsstand, der über Sprint 6 hinausgeht
• Vite: Migration von Vue CLI mit Jest und Nightwatch nach Vite mit Vitest und Nightwatch

Wichtig: Notwendige Client-ID für die Nutzung des Backends

MiracleList basiert auf einem in der öffentlich Cloud zugänglichen Backend. Sie benötigen eine Client-ID, die Sie unter https://miraclelistbackend.azurewebsites.net/clientid beantragen müssen. Die Client-ID muss dann in VUE_APP_ENV_ClientID=TODO in der Datei .env im Code erfasst werden. Ohne die Client-ID ist eine erfolgreiche Anmeldung am Backend nicht möglich.

Was ist MiracleList?

Die Aufgabenverwaltung "MiracleList" ist ein praxisnahes Fallbeispiel für eine Cross-Platform-Anwendung auf Basis einer Single-Page-Webapplication (SPA). MiracleList dient Test- und Weiterbildungszwecken, d.h. MiracleList wird sowohl in den Schulungen als auch in den Fachbüchern von www.IT-Visions.de behandelt. Es gibt ein Backend und verschiedene Implementierung des Clients.

Live-Systeme in der Cloud:

• Backend: https://miraclelistbackend.azurewebsites.net
• Web- + Cross-Platform-Frontend TypeScript/Angular: http://www.miraclelist.net
• Web-Frontend TypeScript/VueJS:http://miraclelist-vue.azurewebsites.net/
• Web-Frontend C#/Blazor Server: http://miraclelist-bs.azurewebsites.net
• Web-Frontend C#/Blazor WebAssembly: http://miraclelist-bw.azurewebsites.net
• Windows-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-win32-x64.rar
• MacOS-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-darwin-x64.rar
• Linux-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-linux-x64.rar

Quellcode:

• Backend .NET: https://github.com/HSchwichtenberg/MiracleListBackend
• Web- + Cross-Platform-Frontend: https://github.com/HSchwichtenberg/MiracleListClient
• Web-Frontend TypeScript/VueJS: https://github.com/HSchwichtenberg/MiracleListVue
• Web-Frontend C#/Blazor: http://leanpub.com/BlazorBuch (in den Downloads zu diesem Buch)

Namensrichtlinien in diesem Vue.js-Projekt

lowerCamelCasing

• Lokale Variablen
• Private Variablen auf Komponentenebene

UpperCamelCasing (Pascal Casing)

• Komponentennamen
• Klassennamen
• Methoden/Funktionen auf Komponentenebene
• Öffenliche Properties

Wichtige Kommandozeilenbefehle für Vite

Pakete installieren

npm install

Entwicklungswebserver mit Hot Reload

npm run dev

Produktionsbuild

npm run build

Unit Tests mit Vitest

npm run test:unit

End-to-End Tests (Browser-UI-Tests) mit Nightwatch

Achten Sie darauf, dass der ChromeDriver in package.json der installierten Version von Chrome entspricht!

npm run test:e2e