Public visé
Développeurs de sites Web désirant développer des applications actuelles Front End.
Prérequis
Avoir une très bonne connaissance de HTML 5, de CSS 3 et de JavaScript.
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
- En cours de formation : études de cas ou travaux pratiques
- En fin de formation : questionnaire d’auto-évaluation