Beschreibung
Vue 3 mit TypeScript
Zielgruppe: Nur für Unternehmen und Institutionen.Vue 3 ist die neueste Version von Vue, die vom Vue-Team von Grund auf mit TypeScript neu geschrieben wurde.
Die neue Version bietet zahlreiche neue und praktische Features, die es Entwicklern ermöglicht, lesbare und wartbare Komponenten zu erstellen und Vue-Anwendungen zu strukturieren.
Der Einsatz von TypeScript als Superset von ECMAScript bietet Entwicklern den aus typensicheren Programmiersprachen wie zB Java oder C# bekannten Komfort der Typensicherheit. Zudem können für die eigene Anwendung individuelle Datentypen erstellt werden und deren Verwendung im Code durch zB Interfaces abgesichert werden.
Dabei können Entwickler den vollständigen Sprach- und Funktionsumfang von TypeScript nutzen und den finalen Code in die gewünschte und benötigte ECMAScript-Version (ES5, ES6 oder auch höher) zu transpilieren.
Aus diesen Vorteilen ergibt sich eine bessere Code Qualität, eine höhere Stabilität der Programme, der Komfort, Fehler bereits beim Schreiben des Codes zu entdecken und nicht erst bei der Ausführung und 'last but not least' eine bessere Wartbarkeit des Codes.
Mit Vue erhalten sie ein freies, sehr schnelles, stabiles und ausgereiftes Framework. Dabei besticht es durch eine extrem steile Lernkurve. Wenig Kenntnisse in HTML, CSS und JavaScript reichen bereits aus, um mit Vue ansprechende und funktional komplexe Anwendungen mit webbasiertem Frontend zu erstellen.
Vite ist ein JavaScript-Build-Tool, welches eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte bieten soll. Das Wort “Vite” kommt hierbei vom Französischen und bedeutet “schnell”.
Vite ersetzt seit Vue 3 als neuer Standard das vorherige Vue CLI.
Das ganze Seminar ist praxisnah und "HandsOn" ausgerichtet. Die meisten Punkte der Agenda werden jeweils in einem Projekt integriert, damit Sie die Verwendung und ihren Einsatzzweck in praktischen Beispielen nachvollziehen und auf Ihren eigenen Anwendungsfall übertragen können.
Ablauf: Am ersten Seminartag lernen Sie die Erstellung eines Vue-Projekts mit Vite sowie die Architektur kennen. Sie erlernen die Grundlagen, wie zB die Kontrollstrukturen, das Binding und Eventhandling sowie die Kommunikation zwischen den Komponenten.
Am zweiten und dritten Seminartag erstellen Sie ein praxisnahes Projekt "from Scratch" und festigen die Techniken, die sie am Vortag kennengelernt haben.
Auch für die Themen "Statemanagement mit Pinia" und "Unit-Testing mit Vitest" werden in dem Seminar eigene kleine Projekte erstellt.
Wichtiger Hinweis: Dadurch, dass TypeScript ein Superset von ECMAScript ist, eignet sich dieses Seminar auch für diejenigen, die im Anschluss Vue 3 nur mit JavaScript und ohne TypeScript einsetzen möchten.
Kommende Starttermine
Inhalte / Module
- Einstieg in Vue 3 mit Vite
- Konzepte von Vue
- Konfiguration der Umgebung, Tools, Plugins
- Neue Projekte Vite erzeugen
- Erstellen einer Start-Seite
- Composition API / Option API
- Einsatz mehrerer Root Elemente / Fragments
- Templates, Komponenten, Direktiven
- Erstellen von Components
- Templates und Template-Syntax
- Data-Binding mit Attributes und v-bind
- Two-Way-Binding mit v-model
- Event-Binding mit v-on
- Verwenden der Shorthand Bindings
- Binding von Computed Properties
- Darstellung von Daten mit Interpolation
- Bedingte Darstellung von Inhalten mit v-if und v-show
- Elemente wiederholen mit v-for
- Styling von Components
- Bedingte Formatierung mit style- und class-Bindings
- Verwendung von SASS und anderen CSS-Präprozessoren
- Verwendung einzelner Lifecycle Hooks
- Kommunikation zwischen Components
- Erstellen von Child-Components
- Datenaustausch mit Child-Components über Props
- Validierung von Props
- Weitergabe an Parent-Components mit Events
- Einfügen von Inhalten in Child-Components mit Slots
- Daten Komponentenübergreifend übergeben und entgegennehmen mit provide / inject
- Verwendung der Portals-Komponente / Teleport
- Erstellen von Custom Directives
- Erzeugen einer Custom Directive
- Datenübergabe an Directives
- Verwenden der Directive-Lifecycle-Hooks
- Globale Directives
- AJAX Request
- AJAX GET- und POST-Requests nativ mit der Fetch API
- AJAX Requests mit der Bibliothek Axios
- Seitennavigation mit Routing
- Hinzufügen von Routing in eine Vue-App
- Verlinkung von Routen
- Styling von Links mit der ActiveRoute
- Navigating per JavaScript-Code
- Arbeiten mit Routen-Parameter
- Weitergabe von Params als Props
- Verwendung von geschachtelten Routen
- Verwendung benannter Views
- Aktivieren des HTML5-History-Modus
- Schutz von Seiten mit den Navigation-Guards
- State Management mit Pinia als Data Store
- Pinia als Store verwenden
- State Management / Pinia als neuer Standard in Vue 3
- Kurzer Überblick über Pinia vs Vuex
- Pinia installieren
- Getters und Actions erstellen
- Unit Testing mit Vitest
- Installation, Integration und Konfiguration von Vitest in einem Vite-Projekt
- Eigene Test-Suites erstellen
- Mausklicks in Tests simulieren und Ergebnis auswerten
- Mocks am Beispiel von AJAX-Requests mit Axios erstellen
- Mock Browser API mit Happy DOM
- Erstellen von Spy-Objekten
- Testabdeckung der Anwendung durch Coverage beobachten
- Snapshots erstellen
- Eigene Vue-Komponenten mounten und testen
Zielgruppe / Voraussetzungen
HTML- CSS- und JavaScript-Kenntnisse werden vorausgesetzt
Hinweis: Dieser Kurs richtet sich an Mitarbeitende aus Unternehmen und Institutionen.
Für Privatpersonen ist dieser Kurs leider nicht geeignet.
Bitte beachten Sie: Bildungsgutscheine der Agentur für Arbeit werden für diesen Kurs NICHT anerkannt.
Abschlussqualifikation / Zertifikat
Infos anfordern
GFU Cyrus AG
Erweitern Sie Ihre IT-Skills mit einem offenen IT-Training oder ganz nach Ihren Bedürfnissen durch eine individuelle IT-Schulung. Programmiersprachen (C#, Python, Java, …), Microsoft Office 365, Anforderungsmanagement, Projektmanagement, Business Intelligence, Data Science, Künstliche Intelligenz, IT-Sicherheit , Administration & Datenbanken, Softwareentwicklung, Testmanagement...
Erfahren Sie mehr über GFU Cyrus AG und weitere Kurse des Anbieters.
Bewertungen von Teilnehmern
Bewertungsdurchschnitt: 4,6
+ Aus Sicht eines Anfängers war das Seminar sehr
hilfreich, vor allem durch die gewählte Methodik und der Strukturierung.
+ Hat sehr viel Spaß gemacht! Vor allem durch "Learni...
Etwas mehr Typescript wäre gut, allerdings auch verständlich durch die Anzahl der vorhandenen Tage.
Eventuell von 3 auf 4 Tage ausbauen.
Remote über RDP und Zoom hat es sehr gut funktioniert.