Vue.js 3 est un framework JavaScript progressif qui permet de construire des interfaces utilisateur reactives, des composants isoles jusqu’aux Single Page Applications completes. Cette formation vous guide de la creation de votre premier composant jusqu’a la gestion d’etat avec Pinia et les tests unitaires avec Vitest. Vous serez operationnel pour developper des applications frontend modernes en equipe.
Public visé
Développeurs de sites Web désirant développer des applications actuelles Front End.
Prérequis
Avoir suivi cette formation, ou en maîtriser les thèmes abordés :
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Mettre en oeuvre le framework Vue.js 3
- Utiliser Vue.js 3 dans le cadre d’une application SPA (Single Page Application) et d’applications clientes plus conventionnelles
Programme
Jour 1 - Matin : Premiers pas avec Vue.js
- Principes clés de Vue.js
- Vue.js vs React vs Angular
- Créer et configurer un projet Vue 3 avec Vite
- La base d’une application : l’instance Vue
- Créer son premier composant Vue.js
- Gérer les évènements du DOM
- Débugger avec Vue Devtools
TP : Instance d’une première application
Jour 1 - Après-midi : Répartir son code dans des composants
- L’imbrication de composants et les props
- Passer du contenu à un composant : les slots/children
- Déclencher des évènements “custom”
- Le cycle de vie des composants
- “Two-way data binding” vs “One-way data flow”
- Validation de la saisie utilisateur
Jour 2 - Matin : Enrichir ses templates
- Computed properties et méthodes
- Templates vs méthodes render() et JSX
- Composants fonctionnels
- Animations et transitions
TP : Réalisation d’une “To Do List”
Jour 2 - Après-midi : Gérer la navigation
- Développer un système de “routing maison”
- Principes de Vue Router
- Configurer des routes
- Sécuriser une application : les “navigation guards”
- Transitions entre écrans
TP : Lecteur d’article provenant d’un serveur
Jour 3 - Matin : Gestion des données avec Pinia
- Pinia : concepts de base (store centralisé, state, getters, actions)
- Installation et mise en oeuvre de Pinia
- Pinia et les formulaires
- Etendre Pinia avec les plugins
- Composition API : Migration d’un composant
- API Options vs API Composition
Jour 3 - Après-midi : Tests et prototype
- Concepts et familles de tests
- Mise en place de l’environnement de test (Vitest, Vue Test Utils v3)
- Réalisation d’un premier test unitaire
- Réaliser un test d’intégration
TP : Création d’un prototype de solution SAS
Modalités pédagogiques
Formation délivrée en présentiel ou distanciel (blended-learning, e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthodes démonstrative, interrogative et active via travaux pratiques et mises en situation.
Moyens pédagogiques :
- Ordinateurs Mac ou PC, connexion internet fibre
- Tableau blanc ou paperboard
- Vidéoprojecteur ou écran tactile interactif
- Environnements de formation installés
- Supports de cours et exercices
Modalités d’évaluation des acquis
- En cours de formation : études de cas ou travaux pratiques
- En fin de formation : questionnaire d’auto-évaluation
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
- Angular - Initiation
- Angular - Avancé
- ReactJS - Composants, Hooks et Redux
- ReactJS - Fonctionnalités avancées
- Vue.js 3 - Fonctionnalités avancées
Formation DEV-VUEJS-100 — VueJS - Initiation. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : vuejs, javascript, frontend, spa, pinia, développement, initiation. Cylian Formation, Dijon.