Bienvenue

Bienvenue dans cette formation dédiée à Vue.js et son écosystème 😃

TIP

This training is also available in English / Cette formation est aussi disponible en Anglais

Prérequis

• Avoir des bases en JavaScript et un peu sur l'écosystème Node.js
• Avoir des bases en HTML
• Préparer son environnement de dev et ses installations avant la formation (voir section Outillage)

Liens utiles

• Documentation officielle de Vue.js en français (opens new window)
• Repo Github pour ce support de formation (opens new window)
• Slides: Introduction to Vue.js - COTRECS octobre 2018 (opens new window)

Plan de la formation

• Bienvenue
  • Prérequis
  • Liens utiles
  • Plan de la formation
• Présentation de Vue.js
  • Qu'est-ce que Vue.js ?
  • Historique
  • L'équipe de développement
  • Business model et financement
  • Popularité
  • Comparaison avec les autres frameworks
  • Points communs entre ces 3 frameworks:
  • Positionnement / autodescription
  • Langages, style et stack technique
  • Comparaison en métaphore
  • Vue 3 ou Vue 2 ?
• Outillage
  • Outils à installer
  • Node.js
  • Visual Studio Code et Vetur/Volar
  • Vue Devtools
  • Utilisation de Vue.js sans étape de build (runtime only)
  • TP : Création de votre premier projet
  • Travailler en mode développeur
  • Build pour la production
  • Configuration du projet
• Vues
  • Aperçu d'un projet Vue
  • Fichiers monocomposants *.vue
  • Travailler en composants
  • Interpolation de texte dans les templates
  • TP : Premier composant
• Directives
  • v-bind : Liaison de propriétés
  • Lier des classes et des styles
  • v-model : Formulaires et inputs
  • v-if : Conditions
  • v-for : Boucles
  • v-on : Événements
  • Modificateurs
  • TP : Fiche d'un film
• Composants
  • Méthodes
  • Computed et watchers
  • TP: Recherche de films
  • Cycle de vie d'un composant
  • Communication entre composants
  • Communication descendante avec les props
  • Communication ascendante avec les events
  • Slots et distribution de contenu
  • Références d'éléments
  • TP: Bien décomposer son application
  • API des composants Vue
  • Propriétés d'instance de vue
  • Méthodes d'instance de vue
• Réactivité
  • Proxies (ECMAScript 6 alias ES2015)
  • Détail du système de réactivité de Vue
• Gestion d'état
  • Pourquoi une solution de gestion d'état ?
  • Données partagées par référence
  • Store et mutations contrôlées
  • Pinia
  • TP : Implémenter un store Pinia
• Routage
  • Installation
  • Configuration du routeur
  • Navigation et router-link
  • TP: Implémentation du routeur
• Requêtes HTTP
  • Architecture
  • TP : Échanger avec un back-end
• Tests automatisés
  • Pourquoi des tests automatisés ?
  • Les types de tests automatisés
  • Choix du test runner
  • Vue Test Utils
  • Ecriture de tests avec Vitest et Vue Test Utils
  • Mocking
  • TP : Tester le composant Film
• Réusabilité et composition
  • API de Composition
  • Directives personnalisées
  • Plugins
• Écosystème de Vue
  • Frameworks UI
  • Server-side rendering
  • Fin de TP - exercices libres