Plan d'enseignement - Cours 141
Vue d'ensemble des 15 séances
| Séance | Date | Thème | Contenu principal |
|---|---|---|---|
| 1 ✓ | 21.01 | Introduction | Environnement, Vue DevTools, Structure projet |
| 2 | 28.01 | Déploiement + Bases | GitHub, Infomaniak, Syntaxe Vue.js |
| 3 | 04.02 | Bases Vue.js | Tuto officiel, SASS, Exercices 1-3 |
| 4 | 11.02 | Cycle de vie | Tuto 8-15, Exercices 4-6 |
| 5 | 25.02 | Consolidation | Revue des bases, Correction Ex.6 |
| 6 | 04.03 | Vuetify | Mini projet, Découverte composants |
| 7 | 11.03 | Mini projet | Suite projet Vuetify, Layouts |
| 8 | 25.03 | JavaScript avancé | Deep copy, Clonage tableaux/objets |
| 9 | 01.04 | Pokédex début | Anatomie Vuetify, Vue Router |
| 10 | 22.04 | Pokédex suite | Étapes 1-5, v-card |
| 11 | 29.04 | Pokédex avancé | Étapes 6-12 |
| 12 | 06.05 | Pokédex complet | Étapes 13-17 |
| 13 | 13.05 | Épreuve formative | Évaluation mi-parcours |
| 14 | 20.05 | Approfondissement | Retour épreuve, Concepts avancés |
| 15 | 27.05 | EXAMEN | Pokédex avec API, DevOps |
Semaines sans cours
- 18 février (vacances)
- 18 mars (vacances)
- 8 avril (vacances de Pâques)
- 15 avril (vacances de Pâques)
Séance 1 - 21 janvier 2026 ✓
Thème : Introduction à Vue.js et Vuetify
Objectifs :
- Mettre en place l'environnement de développement
- Comprendre Vue.js et Vuetify
- Installer Vue DevTools
- Créer sa première application Vue
Contenu couvert :
- Reconnexion WebStorm/GitHub
- Création projet avec
npm create vuetify - Explication npm et npmjs.com (packages)
- Choix TypeScript vs JavaScript (JS pour débutants)
- Lancement serveur avec
npm run dev - Installation et utilisation Vue DevTools (Firefox/Brave)
- Inspection des composants avec DevTools
- Structure projet :
public/vssrc/ - Flux de démarrage : index.html → main.js → App.vue
- Hot Reload (rechargement automatique)
- Modification du template App.vue
Ressources :
Devoirs : Tutoriel Vue.js officiel (étapes 1-7)
Séance 2 - 28 janvier 2026
Thème : Déploiement et bases de Vue.js
Objectifs :
- Publier son projet sur GitHub
- Déployer sur un hébergement web (Infomaniak)
- Découvrir la syntaxe de base de Vue.js
Devoirs préalables : Tutoriel Vue.js officiel (étapes 1 à 7)
Contenu :
Déploiement GitHub (30 min)
- Push du projet sur GitHub
- Structure du dépôt
- Fichier README.md
Déploiement GitHub Pages (30 min)
- Configuration
vite.config.js - Création du workflow GitHub Actions
- Activation GitHub Pages (staging)
- Configuration
Déploiement Infomaniak (30 min)
- Création compte étudiant gratuit
- Configuration FTP et secrets GitHub
- Workflow de production (tags/releases)
Bases de Vue.js - Coder ensemble (75 min)
- Correction tutoriel (étapes 1-7)
- Rendu déclaratif (
) - Liaisons d'attributs (
:attr) - Gestion des événements (
@event) - Liaisons formulaires (
v-model) - Rendu conditionnel (
v-if,v-show) - Rendu de liste (
v-for)
Ressources :
- Déployer sur GitHub Pages
- Déployer sur Infomaniak (FTP)
- Tutoriel Vue.js officiel
- Infomaniak - Programme étudiant
- Démo Mini Pokédex (code de départ)
Séance 3 - 4 février 2026
Thème : Bases de Vue.js - Pratique
Objectifs :
- Maîtriser la syntaxe de base
- Comprendre SASS/SCSS
- Pratiquer avec les exercices
Devoirs préalables : Relire le tutoriel Vue.js (étapes 1 à 7)
Contenu :
- Introduction à SASS/SCSS
- Exercices 1 à 3 "Bases de Vue.js"
Ressources :
Séance 4 - 11 février 2026
Thème : Cycle de vie des composants
Objectifs :
- Comprendre le cycle de vie d'un composant
- Maîtriser les hooks de cycle de vie
- Créer des composants réutilisables
Devoirs préalables : Terminer exercices 1 à 3
Contenu :
- Tutoriel Vue.js (étapes 8 à 10) - Cycle de vie
- Exercices 4 & 6 "Bases de Vue.js"
- Installation de
markdown-it - Tutoriel Vue.js (étapes 11 à 15)
Séance 5 - 25 février 2026
Thème : Consolidation des bases
Objectifs :
- Revoir les concepts fondamentaux
- Corriger les exercices en classe
- Clarifier les points difficiles
Devoirs préalables : Terminer exercices 7 et 8
Contenu :
- Revue des bases de Vue.js avec le formateur
- Correction exercice 6 en classe
Important
Séance de consolidation avant d'aborder Vuetify !
Séance 6 - 4 mars 2026
Thème : Introduction à Vuetify
Objectifs :
- Découvrir les composants Vuetify
- Comprendre Material Design
- Démarrer un mini projet
Contenu :
- Vidéo "IA - C'est pas faux !"
- Mini projet Vuetify :
- Découvrir les composants
- Utiliser les layouts
- Personnaliser le thème
Séance 7 - 11 mars 2026
Thème : Mini projet Vuetify - Suite
Objectifs :
- Approfondir Vuetify
- Maîtriser les grilles et layouts
- Créer une interface responsive
Contenu :
- Suite du mini projet Vuetify
- Grilles et responsive design
- Composants avancés (v-card, v-list)
Séance 8 - 25 mars 2026
Thème : JavaScript avancé
Objectifs :
- Maîtriser le clonage d'objets (deep copy)
- Comprendre les références vs valeurs
- Gérer les mots de passe (Proton Pass)
Contenu :
- Cloner des objets JavaScript
- Cloner des tableaux JavaScript
- Introduction à Proton Pass
Ressources :
Séance 9 - 1er avril 2026
Thème : Projet Pokédex - Début
Objectifs :
- Comprendre l'anatomie d'un projet Vuetify
- Configurer Vue Router
- Démarrer le projet fil rouge
Contenu :
- Exercice Pokédex Vuetify (début)
- Anatomie d'un projet Vuetify
- Vue Router - Configuration des routes
Ressources :
Début du projet fil rouge
À partir de cette séance, nous construisons ensemble le Pokédex !
Séance 10 - 22 avril 2026
Thème : Pokédex - Étapes 1-5
Objectifs :
- Afficher une liste de Pokémon
- Utiliser les composants v-card
- Implémenter la navigation
Devoirs préalables : Terminer les 5 premières étapes
Contenu :
- Passkeys vs login/password
- Vuetify Cards (v-card)
- Correction des étapes 1-5
Séance 11 - 29 avril 2026
Thème : Pokédex - Étapes 6-12
Objectifs :
- Implémenter la recherche
- Ajouter les favoris
- Créer la page de détail
Devoirs préalables : Faire l'étape 8
Contenu :
- Terminer les 12 premières étapes
- Correction des étapes 10 à 12
Séance 12 - 6 mai 2026
Thème : Pokédex - Étapes 13-17
Objectifs :
- Implémenter les formulaires
- Gérer le state avec Pinia
- Finaliser les fonctionnalités
Contenu :
- Réalisation des étapes 13 à 17
- Correction collective
Séance 13 - 13 mai 2026
ÉPREUVE FORMATIVE
Format :
- Évaluation pratique sur poste
- Couvre les modules 1-12 du Pokédex
- Utilisation de Vue.js, Vuetify, Vue Router
Séance 14 - 20 mai 2026
Thème : Approfondissement
Objectifs :
- Analyser les résultats de l'épreuve
- Découvrir des concepts avancés
- Explorer les frameworks dérivés
Contenu :
- Retour épreuve formative
- Inception → Frameworks dans les frameworks
- v-container (plusieurs instances)
- Electron.js (apps desktop)
Séance 15 - 27 mai 2026
EXAMEN DE MODULE
Contenu :
- Pokédex avec API REST
- Corrigé complet
- Introduction à Ionic Framework (apps mobiles)
- GitHub Actions (DevOps)
Ressources :
Récapitulatif des compétences
| Compétence | Séances |
|---|---|
| Vue.js 3 - Composition API | 1-5 |
| Déploiement (GitHub Pages, Infomaniak FTP) | 2 |
| Vuetify - Material Design | 6-15 |
| Vue Router - Navigation | 9-15 |
| Pinia - State management | 11-15 |
| Axios - API REST | 15 |
| Apps hybrides (Capacitor) | 14-15 |