Vue.JS - Développement d'applications web (IT) / Freelance in Levallois-Perret

Bonjour,

nous recherchons un formateur pour la mission suivante :

Objectifs pédagogiques

• Maîtriser l'environnement du développeur JS
• Comprendre les principes clés et bonnes pratiques de Vue.js par rapport à d'autres frameworks ou bibliothèques (jQuery, Angular, React)
• Connaître les outils indispensables au développement d'applications web dynamiques avec Vue.js
• Savoir développer une SPA avec Vue.js dans un environnement de développement JavaScript cohérent
• Réaliser des tests

Programme

Jour 1 – Avantages et inconvénients de Vue.js

• Qu'est-ce qu'une application SPA (Single Page Application) ?
• Les origines du framework Vue.js
• Pourquoi choisir Vue.js ?
• Comparaison avec les frameworks (jQuery, Angular, ReactJS)
• Travaux pratiques : identification de comment Vue.js répond à une problématique concrète de développement web, comparaison avec jQuery, Angular et React

Utilisation simple de Vue

• Utilisation simple, sans outils de build
• Présentation de "hello world"
• Savoir intégrer Vue.js incrémentalement
• Travaux pratiques : création d'une page HTML intégrant Vue.js via un CDN, développement d'une petite application avec data binding et directives Vue.js

Jour 2 – Utilisation sous forme de templates

• Le one-way data binding
• Connaître les méthodes d'utilisation de Vue.js
• Les computed properties
• Directives de contrôle de flux
• Directives de gestion d'événements
• Présentation des principaux filtres
• Les composants fournis avec Vue.js
• Connaître les pièges les plus courants
• Travaux pratiques : transformation d'une page HTML statique en page dynamique avec les directives v-if, v-for et les propriétés calculées

Utilisation sous forme de composant

• Découpler les widgets du HTML
• Présentation du cycle de vie des composants
• Modules complets "stand alone"
• Connaître la hiérarchie et la composition
• Maîtriser les états et la communication entre composants
• Composant option API
• Les différences avec composition API
• Travaux pratiques : développement de composants réutilisables et gestion de la communication via props et événements personnalisés

Jour 3 – Routing avec Vue-router

• La déclaration des vues
• La manipulation de l'historique
• La navigation
• Routes imbriquées / Nested routes
• Redirection
• Gestion d'erreur
• Les messages flash
• Travaux pratiques : configuration de Vue Router en mode historique, gestion des routes imbriquées, redirections et pages d'erreur

Data store avec Pinia (introduction)

• Les apports d'un gestionnaire d'état (état, vue, actions)
• Zone de stockage centralisée pour tous les composants
• Règles pour contrôler les mutations de l'état de l'application
• Créer et appeler des actions
• Cache et performance
• La gestion des erreurs
• Définir des accesseurs (getters)
• Travaux pratiques : création d'un store Pinia pour gérer une liste de tâches avec getters de filtrage

Vue.js et les données extérieures (Call API)

• Utiliser Axios pour consommer des API
• Consommation d'une API REST avec Vue 3
• Travaux pratiques : requête GET vers une API de contacts, affichage des données, filtrage par nom, gestion des états de chargement et d'erreur

Vue.js dans une stack JS moderne : npm, webpack, Babel et Vite

• Installation via le package manager
• La construction via webpack
• Projet avec Vite
• Pre-processing avec Rollup
• Travaux pratiques : build de production avec Vite, optimisation des bundles (lazy loading, tree shaking), déploiement sur serveur statique

Bonnes pratiques avec Vue.js

• Emplacements et composants
• Organisation du store Pinia
• Appels d'API et validation des données
• La gestion des variables d'environnement ($config)
• Optimiser l'utilisation des bibliothèques (coût d'importation)
• Travaux pratiques : développement d'une application complète de type blog (liste, ajout, modification, suppression d'articles) avec Vue Router, Pinia, Axios et composants réutilisables

#J-18808-Ljbffr