Description
Objectif de formation : L'objectif est de permettre aux participants de devenir compétents dans la création d'applications web réactives et performantes avec Vue.js, en couvrant à la fois les bases et les fonctionnalités avancées du framework.
Objectifs pédagogiques
- Maîtriser les principes fondamentaux de Vue.js et ses composants
- Comprendre et appliquer la gestion d'état centralisée avec Vuex
- Utiliser Vue Router pour ajouter un routage client-side dans les applications Vue
- Apprendre les meilleures pratiques pour structurer et déployer des applications Vue.js à grande échelle
Public concerné
Développeurs
Professionnels IT
Prérequis
Connaissance de base en HTML, CSS et JavaScript
Familiarité avec les concepts de programmation front-end
Déroulé du programme
1
Vue.js dans l'écosystème JavaScript moderne : positionnement et avantages
- Installation de Vue.js et configuration initiale d'un projet Vue
- Premiers pas avec Vue : instance Vue, directives, et binding de données
- Data binding : v-bind, v-model pour les formulaires, et gestion des événements avec v-on
- Directives Vue : utilisation de v-if, v-for, et v-show pour le contrôle du rendu conditionnel et des listes
- Définition et enregistrement de composants
- Communication entre composants : props pour passer des données, émission d'événements pour la communication inverse
- Travaux Pratiques : Création d'une application de liste de tâches simple, illustrant l'utilisation de composants, de directives, et du data binding
2
Composants avancés et transitions (7 Heures)
7h
- Composants dynamiques : Utilisation de keep-alive pour optimiser le rendu de composants dynamiques
- Composants asynchrone : Chargement asynchrone de composants pour améliorer la performance de l'application
- Vue’s transition system : application de transitions et animations sur les éléments du DOM
- Création d'animations personnalisées avec les hooks de transition de Vue
- Travaux Pratiques : Extension de l'application de liste de tâches avec des animations lors de l'ajout/suppression des tâches et intégration de composants chargés de manière asynchrone
3
Gestion d'état avec Vuex (7 heures)
7h
- Fondamentaux de Vuex : Compréhension de l'architecture Flux/Vuex et de l'importance de la gestion d'état centralisée
- Structure d'un store Vuex : state, getters, mutations, et actions
- Configuration et utilisation de Vuex dans un projet Vue
- Patterns et pratiques recommandées pour un code scalable et maintenable
- Travaux Pratiques : Ajout de Vuex à l'application de liste de tâches pour centraliser la gestion d'état, implémentant des actions pour les opérations asynchrones
4
Routage avec vue Router (7 heures)
7h
- Configuration et utilisation de base de vue Router
- Définition des routes et sous-routes, liens avec router-link, et navigation programmatique avec router.push
- Introduction aux fonctionnalités avancées de Router
- Lazy loading des composants de route pour des performances optimales
- Gardes de route pour la sécurité et le contrôle d'accès aux routes
- Travaux Pratiques : Intégration de Vue Router dans l'application de liste de tâches, création d'une page de détails pour chaque tâche avec accès contrôlé
5
Déploiement et bonnes pratiques (7 heures)
7h
- Focus sur les bonnes pratiques de développement
- Organisation et structuration d'un projet Vue pour la maintenabilité
- Stratégies de performance et optimisation : utilisation efficace des composants, gestion du state et du cache
- Déploiement : Processus de build pour la production
- Introduction aux plateformes de déploiement (Netlify, Vercel) et configuration nécessaire pour le déploiement d'applications Vue
- Travaux Pratiques : Préparation et déploiement de l'application sur une plateforme choisie, avec mise en place d'un pipeline CI/CD simple si possible
Informations
Durée
5 jour(s)
35h
Tarif
2930 € HT
HT
