Description
Objectif général: À l’issue de la formation, les participants seront capables de développer des applications web dynamiques et modernes avec Vue.js, en exploitant les concepts fondamentaux et les outils essentiels de cet écosystème. Modalité : Toutes les modalités (présentiel, classe virtuelle et hybride) sont possibles Lieu possible de réalisation : Locaux du bénéficiaire ou locaux d’Ascent Formation, en France métropolitaine et dans les DROM-COM Nombre maximal de participants : 20 Niveau SAME visé : Application (A) Compétences visées Comprendre les concepts fondamentaux de Vue.js. Développer des Single Page Applications (SPA) avec Vue.js. Utiliser les outils clés de l’écosystème Vue.js pour la gestion de projets. Intégrer et gérer les composants dans une architecture Vue.js.
Objectifs pédagogiques
- Découvrir les bases du framework Vue.js (composants, directives, événements).
- Développer une application web modulaire et maintenable avec Vue.js.
- Utiliser des outils comme Vue CLI pour initialiser et configurer des projets.
- Gérer les états et les routes dans une application Vue.js.
Public concerné
Prérequis
Déroulé du programme
Jour 1 : Introduction à Vue.js et concepts fondamentaux (6 heures)
- Introduction à Vue.js (1 heure)
Présentation du framework Vue.js et de ses cas d’utilisation.
Comparaison avec d’autres frameworks (React, Angular).
Configuration d’un environnement Vue.js avec Vue CLI.
Travaux pratiques : Installer Vue CLI et configurer un projet de base.
- Concepts fondamentaux de Vue.js (2,5 heures)
Directives et interpolation (v-bind, v-if, v-for, etc.).
Gestion des événements et écouteurs (@click, @input).
Travaux pratiques : Développer une interface dynamique simple avec Vue.js.
- Gestion des composants (2,5 heures)
Création, utilisation et communication entre composants.
Cycle de vie des composants Vue.js.
Travaux pratiques : Structurer une application avec plusieurs composants.
Jour 2 : Applications dynamiques avec Vue.js (6 heures)
- Gestion des états avec Vuex (2 heures)
Présentation de Vuex pour la gestion centralisée des états.
Concepts clés : store, mutations, actions, getters.
Travaux pratiques : Implémenter un système de gestion d’état dans une application Vue.js.
- Routage avec Vue Router (2 heures)
Introduction à Vue Router pour la navigation SPA.
Définir et protéger des routes dynamiques.
Travaux pratiques : Créer une navigation multi-pages dans une application Vue.js.
- Intégration des bibliothèques et plugins (2 heures)
Utilisation de bibliothèques tierces (exemple : Axios pour les appels API).
Ajout de plugins à un projet Vue.js.
Travaux pratiques : Intégrer une API REST et afficher les données dans l’application.
Jour 3 : Projet final et outils avancés (6 heures)
- Outils indispensables pour Vue.js (2 heures)
Utilisation de Vue DevTools pour le débogage.
Introduction à Nuxt.js pour des projets Vue.js avancés.
Travaux pratiques : Analyser et optimiser une application Vue.js avec Vue DevTools.
- Développement d’un projet final (4 heures)
Scénario : Développer une SPA complète avec gestion des états, routage et intégration API.
Démonstration des bonnes pratiques : structuration, performance et modularité.
Travaux pratiques : Réalisation du projet sous supervision du formateur, avec mise en production simulée.
Informations
Durée
3 jour(s)
18h
2200 € HT
HT
