Maitrise de Vue complete 2022 (Fondamental, Pinia, Composition API, Vitest)
Mis à jour avec toutes les nouvelles fonctionnalités de Vue 3 pour 2022
Utilisant la dernière version de Vue, ce cours est axé sur l’efficacité. Ne perdez plus de temps sur des didacticiels confus, obsolètes et incomplets.
Nous vous garantissons qu’il s’agit de la ressource en ligne la plus complète sur Vue. Ce cours basé sur un projet vous présentera toute la chaîne d’outils moderne d’un développeur Vue JS en 2022. En cours de route, nous créerons une application de lecteur de musique massive similaire à Spotify en utilisant Vue, Pinia, Vue Router, Composition API, Firebase, Vitest , Sas + plus. Il s’agira d’une application complète utilisant Firebase.
Tout le code sera fourni étape par étape et même si vous n’aimez pas coder, vous aurez accès au code complet du projet maître afin que toute personne inscrite au cours ait le sien projet à mettre sur leur portfolio tout de suite.
Le programme va être très pratique car nous vous accompagnerons du début à la fin de la sortie d’un projet Vue professionnel jusqu’à la production. Nous commencerons dès le début en vous enseignant les bases de Vue, puis nous aborderons des sujets avancés afin que vous puissiez prendre de bonnes décisions sur l’architecture et les outils sur l’un de vos futurs projets VueJS. Vous allez adorer Vue si vous êtes nouveau dans les frameworks front-end ou même si vous venez d’un arrière-plan React ou Angular !
Voici ce que couvrira le cours :
1. FONDAMENTAUX – Dans cette section, nous découvrirons les principes fondamentaux de Vue, tels que les propriétés calculées, les méthodes et les observateurs. Avec seulement les principes de base, nous pourrons manipuler le document avec des événements, une liaison et un rendu conditionnel. Nous apprendrons également à déboguer une application avec les outils de développement officiels de Vue.
2. PROJET : PERSPECTIVE PLAYGROUND – Dans cette section, nous allons construire notre premier projet en créant un terrain de jeu en perspective CSS. Cela nous donnera l’occasion de renforcer bon nombre des concepts fondamentaux que nous avons appris dans la section précédente en développant un outil permettant de visualiser comment les propriétés CSS peuvent manipuler la perspective d’un élément.
3. AU-DELÀ DES FONDAMENTAUX – Dans cette section, nous allons plonger dans le fonctionnement interne du framework Vue. Comment les frameworks JavaScript ajoutent-ils de la réactivité ? Comment Vue compile-t-il les templates en objets DOM virtuels ? Cela nous donnera un aperçu de la façon dont Vue est capable de fournir un cadre pour les applications modernes. Nous parlerons également des hooks et des composants du cycle de vie.
4. APPRENDRE À PROPOS DES OUTILS – Dans cette section, nous prendrons du recul par rapport à Vue pour parler de certains outils de développement d’applications. Tout au long de votre carrière, vous devrez gérer les outils qui nous aident à développer des applications (par exemple, Vite, Sass, PostCSS, ESLint). Nous expliquerons comment ces outils sont configurés et pourquoi ils sont nécessaires.
5. COMPOSANTS AVANCÉS – Dans cette section, nous allons échafauder un projet Vue avec Vite. L’objectif de Vue est de rendre l’expérience de développement aussi fluide et indolore que possible. Vue peut nous aider à échafauder un projet, à configurer des outils et à faire fonctionner un serveur. Cela soulage une grande partie des tâches les plus fastidieuses du développement Web. Nous pourrons passer directement aux composants pour voir comment concevoir une application avec des composants en utilisant des accessoires, en émettant des événements, des slots et en rendant dynamiquement le contenu.
6. TRANSITIONS & ANIMATIONS – Dans cette section, nous allons apprendre à ajouter du piquant à une application en ajoutant des transitions et des animations. Les animations peuvent donner vie à n’importe quelle application. Ils peuvent également améliorer l’expérience utilisateur en donnant à l’utilisateur des commentaires sur ses actions. Nous discuterons de la manière dont les animations peuvent être réalisées avec CSS et JavaScript. Les deux sont pris en charge dans Vue. Nous parlerons même de la dernière API Web Animations.
7. PROJET : APPLICATION DE QUIZ – Dans cette section, nous allons utiliser tout ce que nous avons appris jusqu’à présent pour développer une application de quiz. Les questionnaires sont un excellent moyen d’impliquer les utilisateurs dans presque tous les secteurs.
8. PROJET DE MAÎTRE : INTRODUCTION À PINIA – Dans cette section, nous allons commencer à travailler sur le projet de maître de ce cours, qui est une application musicale ! Téléchargez, gérez et écoutez de la musique sans interruption. Nous utiliserons TailwindCSS pour nous aider à concevoir une belle application moderne. C’est le petit nouveau sur le bloc qui est adopté par la communauté des développeurs front-end. Ensuite, nous apprendrons la gestion de l’état en utilisant la bibliothèque d’état officielle appelée PINIA (remplace Vuex dans les nouvelles bases de code).
9. PROJET DE MAÎTRE : VALIDATION DU FORMULAIRE – Dans cette section, nous effectuerons la validation du formulaire pour empêcher la soumission de données invalides. Les accidents arrivent. C’est notre travail de nous assurer de vérifier les erreurs. Nous allons apprendre à appliquer des règles pour différents scénarios.
10. PROJET DE MAÎTRE : AUTHENTIFICATION – Dans cette section, nous allons commencer l’authentification et l’enregistrement. Les utilisateurs pourront se connecter immédiatement après avoir créé un compte. Nous utiliserons Firebase comme solution backend pour gérer et vérifier les utilisateurs.
11. PROJET DE MAÎTRE : ROUTAGE – Dans cette section, nous allons gérer le routage avec la bibliothèque Vue Router. En dessous, la bibliothèque de routeurs utilise l’API d’historique pour gérer la navigation. Cela nous permet de basculer entre les pages sans rafraîchir les actifs. Nous verrons comment nous pouvons utiliser cette bibliothèque pour nous aider à protéger les itinéraires, ajouter des champs méta et personnaliser l’apparence de notre site en fonction de l’itinéraire actuel.
12. PROJET MAÎTRE : TÉLÉCHARGEMENT DE FICHIERS – Dans cette section, nous allons commencer à télécharger des fichiers sur Firebase. Il est essentiel que nous validions les fichiers avec Firebase. Nous ne voulons pas que les utilisateurs téléchargent accidentellement un fichier malveillant lorsqu’ils écoutent de la musique. Nous verrons comment appliquer la validation avec les règles Firebase. Après cela, nous stockerons des informations supplémentaires dans une base de données. Nous expliquerons même comment mettre en œuvre une solution de secours au cas où le glisser-déposer n’est pas disponible.
13. PROJET DE MAÎTRE : JOUER DE LA MUSIQUE – Dans cette section, nous allons commencer à rendre le lecteur audio fonctionnel. Nous mettrons en œuvre des fonctionnalités de base telles que la lecture/pause, le balayage et l’affichage de la durée actuelle. Nous rendrons le reste du site fonctionnel en permettant aux utilisateurs d’envoyer des commentaires, de parcourir de la musique et de trier des données.
14. PROJET DE MAÎTRE : DIRECTIVES – Dans cette section, nous allons brièvement apprendre à rédiger des directives personnalisées. Les directives sont des attributs qui peuvent étendre un élément avec des propriétés et des méthodes supplémentaires. Nous couvrirons les bases et examinerons des concepts avancés tels que les modificateurs et les arguments.
15. PROJET DE MAÎTRE : INTERNATIONALISATION – Dans cette section, nous ajouterons l’internationalisation à un projet pour traduire un projet dans plusieurs langues. Il existe différentes manières de traduire un message. Certains messages doivent être formatés ou pluralisés. Nous pouvons également traduire des nombres (c’est-à-dire des devises). Nous verrons comment passer d’une langue à l’autre en quelques lignes de code.
16. PROJET DE MAÎTRE : PWA – Le Web est passé à une approche axée sur le mobile. Dans cette section, nous allons ajouter des fonctionnalités PWA (Progressive Web App) pour rendre notre application adaptée aux mobiles en utilisant Workbox pour mettre en cache les fichiers et conserver les données avec Firebase.
17. PROJET MAÎTRE : OPTIMISATIONS – Dans cette section, nous procéderons à quelques optimisations finales avant d’expédier notre application en production. Il existe différentes techniques et outils que nous examinerons pour nous aider à affiner notre application. Nous pouvons utiliser Vite pour fragmenter les fichiers et enregistrer automatiquement les composants. Nous allons ajouter quelques fonctionnalités pour aider l’utilisateur à comprendre que l’application traite une demande pour une expérience utilisateur conviviale.
18. PROJET DE MAÎTRE : DÉPLOIEMENT – Dans cette section, nous allons déployer notre application sur Vercel en une seule commande ! Rapide et facile.
19. PROJET DE MAÎTRE : TEST – Dans cette section, nous expliquerons comment tester un projet avec Vitest. Les tests unitaires nous permettent de tester une fonctionnalité de manière isolée. Il s’agit du type de test le plus courant que vous passerez. Il y a quelques problèmes avec les tests qui peuvent être résolus avec des moqueries. En se moquant du code, nous pourrons isoler les fonctionnalités et les tester. Ensuite, nous passerons aux tests instantanés et aux tests E2E pour tout rassembler.
20. API DE COMPOSITION – Dans cette section, nous aborderons la dernière fonctionnalité introduite dans Vue appelée API de composition. C’est une manière différente de construire des composants. Bien que Vue fournisse une API simple pour écrire des composants, il y a quelques lacunes. L’API de composition résout ces problèmes. Nous expliquerons pourquoi vous souhaitez utiliser l’API de composition et comprendrez pourquoi elle a été introduite.
Ce cours ne consiste pas à vous faire coder sans comprendre les principes, de sorte que lorsque vous avez terminé le cours, vous ne savez plus quoi faire d’autre que de regarder un autre didacticiel. Non! Ce cours vous poussera et vous mettra au défi de passer d’un débutant absolu dans Vue à quelqu’un qui fait partie des 10 % des meilleurs développeurs Vue.
Nous vous garantissons qu’il s’agit du cours en ligne le plus complet sur Vue JS ! Regardez la vidéo de présentation du cours pour voir tous les sujets que nous allons couvrir, tous les projets que nous allons construire et toutes les techniques que vous allez apprendre pour devenir un développeur Vue de haut niveau !
