# Bienvenue

# 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)

# 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
  • PHPStorm / WebStorm
  • 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
  • Quelques mots sur les outils installés
  • Travailler en mode développeur
  • Build pour la production
  • Configuration du projet
• API de Composition
• 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
• Routage
  • Installation
  • Configuration du routeur
  • Navigation et router-link
  • TP: Implémentation du routeur
  • Transitions
  • TP: Ajout de transitions
• 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
• 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
  • Cypress (tests e2e)
  • Vue Test Utils
  • Ecriture de tests avec Vitest et Vue Test Utils
  • Mocking
  • TP : Tester le composant Film
• Projet
  • Description
  • Rendu
  • Barème
• Gestionde la sécurité
  • Gestion de l'authentification avec Vuejs et ApiPlatform
  • Introduction et JWT
  • Mise en place de l'authentification
  • Securisation des routes
  • Introduction
  • Mise en place
• Mise en place d'un upload depuis VueJs vers ApiPlatform (ou autre)
  • La partie front-end
  • Mais comment le traiter côté API...
• Écosystème de Vue
  • Frameworks UI
  • Server-side rendering
  • Fin de TP - exercices libres