Vollständiger Vue-Entwickler [Pinia, Vitest]: Null bis Meisterschaft

Dieser Vue-Kurs dreht sich darum, Ihre Lerneffizienz zu maximieren. Verabschieden Sie sich von verworrenen, veralteten und unvollständigen Tutorials und nutzen Sie die Gelegenheit, schlanke, professionelle Apps mit Vue 3 zu erstellen.

Zudem lernen Sie in einer lebendigen, unterstützenden Community.

Zero To Mastery-Absolventen haben erfolgreich Positionen bei erstklassigen Unternehmen wie Google, Tesla, Amazon, Apple, IBM, Uber, Facebook und Shopify, unter anderem angenommen.

Viele arbeiten als gefragte Freiberufler und arbeiten remote von allen sieben Kontinenten aus.

Und Sie können definitiv einer von ihnen sein.

Indem Sie sich heute anmelden, erhalten Sie Zugang zu unserem exklusiven Live-Online-Community-Klassenzimmer, in dem tausende von Mitstudenten, Alumni, Mentoren, TAs und Lehrern Wissen austauschen und zusammenarbeiten.

Dynamisch. Unterstützend. Ermächtigend. Freundlich. Unverzichtbar.

Dies sind nur einige der Begriffe, die Studenten verwenden, um die ZTM-Community auf Discord zu beschreiben, die zu den aktivsten Netzwerken für Entwickler auf Discord gehört.

Das Beste daran: Sie werden von Branchenprofis unterrichtet, die echte Erfahrung mit der Arbeit an Vue und dem Aufbau groß angelegter Anwendungen für Unternehmen in Toronto und im Silicon Valley haben.

Dieser praxisorientierte Kurs wird Sie in das moderne Vue JS-Entwicklerwerkzeugset für 2024 eintauchen lassen und Sie durch jeden Schritt der Einführung eines professionellen Vue-Projekts in die Produktion führen.

Ihr Abschlussprojekt wird die Entwicklung einer umfassenden Full-Stack-Musik-Player-Anwendung sein, die an Spotify erinnert und Vue, Pinia (die neuere Version von Vuex), Vue Router, Composition API, Firebase, Vitest, Sass und mehr verwendet.

Alles wird Schritt für Schritt genau erklärt, und wenn Sie nicht gerne mitcodieren, haben Sie vollen Zugriff auf den kompletten Master-Projektcode, sodass Sie Ihre eigene App sofort in Ihrem Portfolio präsentieren können.

Hier ist eine detaillierte Aufschlüsselung dessen, was dieser Kurs abdeckt, um Sie von Null zur Vue-Meisterschaft zu führen:

Wir beginnen mit den Grundlagen und Essentials von Vue und gehen dann zu fortgeschritteneren Themen über, um Sie mit dem Wissen auszustatten, fundierte Entscheidungen über Architektur und Werkzeuge für Ihre zukünftigen Vue.js-Projekte zu treffen.

Sie werden Vue lieben, egal ob Sie ein Front-End-Neuling sind oder von einem React- oder Angular-Hintergrund her wechseln!

1. GRUNDLAGEN - Lernen Sie die Grundlagen von Vue, einschließlich berechneter Eigenschaften, Methoden und Überwachern. Mit diesen grundlegenden Konzepten werden Sie Dokumente durch Ereignisse, Bindung und bedingte Darstellung effektiv manipulieren. Außerdem erlernen Sie Debugging-Techniken mit den offiziellen Vue Developer Tools.

2. PROJEKT: PERSPEKTIVEN-SPIELPLATZ - Ihr erstes Projekt wird ein Spielplatz für CSS-Perspektiven sein. Diese Übung wird die grundlegenden Konzepte festigen und Ihnen ein Werkzeug an die Hand geben, um zu visualisieren, wie CSS-Eigenschaften Perspektiven von Elementen manipulieren.

3. TIEFEINBLICK IN VUE - Erkunden Sie die Feinheiten des Vue-Frameworks. Entdecken Sie, wie JavaScript-Frameworks Reaktivität implementieren und wie Vue Vorlagen in virtuelle DOM-Objekte umwandelt. Dieser Abschnitt wird die Fähigkeiten des Vue-Frameworks für moderne Anwendungen beleuchten, zusammen mit Diskussionen über Lebenszyklus-Hooks und Komponenten.

4. TOOLING-WISSEN - Wir werden einige wesentliche Werkzeuge für die Anwendungsentwicklung wiederholen. Während Sie in Ihrer Karriere voranschreiten, müssen Sie die Tools verstehen, die die Entwicklung erleichtern (z. B. Vite, Sass, PostCSS, ESLint). Wir werden die Konfiguration und die Bedeutung dieser Tools durchgehen.

5. FORTGESCHRITTENE KOMPONENTEN - In diesem Modul werden wir ein Vue-Projekt mit Vite starten. Vue ist darauf ausgelegt, das Entwicklungserlebnis zu vereinfachen, und erleichtert Aufgaben wie das Gerüst-Erstellen von Projekten und das Ausführen von Servern. Wir werden direkt mit Komponenten arbeiten und die Architektur durch Props, Ereignisauslösung, Slots und dynamische Darstellung erkunden.

6. ÜBERGÄNGE & ANIMATIONEN - Lernen Sie, wie Sie Ihre App durch die Integration von Übergängen und Animationen aufleben lassen. Diese Verbesserungen bringen Vitalität in Anwendungen und verbessern die Benutzererfahrung, indem sie Feedback zu deren Aktionen geben. Wir werden erforschen, wie Animationen mit CSS und JavaScript, einschließlich der neuesten Web Animations API, implementiert werden können.

7. PROJEKT: QUIZ APP - Wenden Sie Ihr erworbenes Wissen an, um eine Quiz-Anwendung zu erstellen, ein vielseitiges Engagement-Tool in verschiedenen Branchen.

8. HAUPTPROJEKT: EINFÜHRUNG IN PINIA - Beginnen Sie mit dem Hauptprojekt—einer Musik-Anwendung (ähnlich wie Spotify)! Laden Sie nahtlos Ihre Musik hoch, verwalten und genießen Sie sie, indem Sie TailwindCC für ein schönes, modernes Design verwenden. Wir werden das Zustandsmanagement mit der offiziellen Bibliothek, Pinia, einem Upgrade von Vuex, angehen.

9. HAUPTPROJEKT: FORMULARVALIDIERUNG - Implementieren Sie robuste Formularvalidierung, um die Übermittlung ungenauer Daten zu verhindern—und stellen Sie sicher, dass Fehler erkannt werden, bevor sie zu Problemen werden.

10. HAUPTPROJEKT: AUTHENTIFIZIERUNG - Initiieren Sie die Benutzeranmeldung und -registrierung und ermöglichen Sie es Benutzern, sich nahtlos anzumelden, nachdem sie ein Konto erstellt haben. Firebase wird unsere Backend-Lösung für Benutzerverwaltung und Verifizierung sein.

11. HAUPTPROJEKT: ROUTING - Navigieren Sie Seitenübergänge mit der Vue Router-Bibliothek, wobei die History-API für nahtlose Navigation verwendet wird. Entdecken Sie, wie Sie diese Bibliothek für Routenschutz, Metafelder und die Anpassung des Site-Aussehens basierend auf der aktuellen Route nutzen können.

12. HAUPTPROJEKT: DATEI-HOCHLADEN - Ermöglichen Sie das Hochladen von Dateien zu Firebase und stellen Sie sicher, dass die Validierung verhindert, dass schädliche Dateien verbreitet werden. Wir werden gespeicherte Informationen in Datenbanken erkunden und eine Fallback-Lösung für fehlende Drag-and-Drop-Funktionalität implementieren.

13. HAUPTPROJEKT: AUDIO PLAYER - Entwickeln Sie den Audio-Player und integrieren Sie Funktionen wie Abspielen/Pausieren, Scrollen und Dauerverfolgung. Sie werden auch die Benutzerfreundlichkeit durch die Möglichkeit zur Benutzerkommentierung, Musikbrowsing und Datensortierung verbessern.

14. HAUPTPROJEKT: DIREKTIVEN - Untersuchen Sie die Erstellung benutzerdefinierter Direktiven—Attribute, die Elemente um zusätzliche Eigenschaften und Methoden erweitern. Wir tauchen in grundlegende und fortgeschrittene Konzepte ein, einschließlich Modifikatoren und Argumente.

15. HAUPTPROJEKT: INTERNATIONALISIERUNG - Rüsten Sie Ihr Projekt für Mehrsprachigkeit aus und untersuchen Sie verschiedene Übersetzungstechniken. Lernen Sie, wie Sie Sprachen nahtlos innerhalb Ihres Codes formatieren und wechseln können.

16. HAUPTPROJEKT: PWA - Während das Web auf Mobile-First-Design umschwenkt, implementieren Sie Progressive Web App-Funktionen und verbessern die Mobile-Freundlichkeit Ihrer App mithilfe von Workbox für Dateicaching und Datenpersistenz mit Firebase.

17. HAUPTPROJEKT: OPTIMIERUNGEN - Schließen Sie Anpassungen ab, bevor Sie Ihre App in die Produktion einführen. Wir werden mehrere Techniken zur Optimierung Ihrer Anwendung erforschen und Vite verwenden, um Dateibündelung und mühelose Komponentenregistrierung zu erleichtern, während die Benutzererfahrung während der Verarbeitung verbessert wird.

18. HAUPTPROJEKT: BEREITSTELLUNG - Stellen Sie Ihre App nahtlos mit einem einzigen Befehl auf Vercel bereit! Es ist ein unkomplizierter und schneller Prozess.

19. HAUPTPROJEKT: TESTEN - Lernen Sie Strategien zum Testen Ihres Projekts mit Vitest. Meistern Sie Unit-Tests, um Funktionen isoliert zu testen, befassen Sie sich mit häufigen Testanliegen wie Mocking und machen Sie Fortschritte hin zu Snapshot-Tests und End-to-End-Tests für ein umfassendes Verständnis.

20. COMPOSITION API - Beschäftigen Sie sich mit Vue’s neuester Funktion—der Composition API. Dieser innovative Ansatz zum Erstellen von Komponenten adressiert frühere Einschränkungen und bietet eine überzeugende Alternative. Wir werden die Vorteile und Beweggründe für deren Einführung näher betrachten.

Was ist die Schlussfolgerung?

Zusammengefasst repräsentiert dieser Kurs ein gründliches und umfassendes Vue-Bootcamp.

Wir sind jedoch nicht auf reines Codieren ohne Verständnis der Konzepte ausgerichtet. Unser Ziel ist es, Sie vom absoluten Anfänger in die obersten 10% der Vue-Entwickler zu katapultieren 💪.

Außerdem gibt es absolut kein Risiko. Tauchen Sie noch heute ins Lernen ein, und wenn der Kurs nicht alles ist, was Sie sich erhofft haben, bieten wir eine 100%ige Rückerstattung innerhalb von 30 Tagen an—ohne Probleme, ohne Fragen.