Vue.js

Slides#

Deck 3 — Vue.js et la toolchain (PDF)PDF

Objectif : apprendre à construire un site avec la boîte à outils d'un studio web en 2026 — terminal, Node.js, npm, Vite, Vue.js, Tailwind CSS, Git et VS Code — et s'en servir pour coder ton portfolio.

La toolchain, c'est le métier#

Jusqu'ici tu écrivais un fichier index.html, tu l'ouvrais dans le navigateur, et ça marchait. C'est très bien pour apprendre. Ce n'est plus comme ça qu'on livre un site.

En agence, en freelance, dans n'importe quelle équipe produit, le travail passe par une toolchain : une chaîne d'outils qui s'enchaînent.

Outil	À quoi il sert
Le terminal	Donner des ordres à ta machine, en texte
Node.js	Faire tourner du JavaScript en dehors du navigateur
npm	Installer et lancer les outils du projet
Vite	Le serveur de développement : tu sauvegardes, la page se met à jour
Vue.js	Construire l'interface en composants réactifs
Tailwind CSS	Styler directement dans le HTML, sans fichier CSS à rallonge
Git	Garder l'historique du projet et le mettre en ligne
VS Code	L'éditeur, avec l'autocomplétion qui va avec

Il y a une deuxième raison d'apprendre tout ça, et elle est nouvelle. Les agents IA manipulent exactement ces outils : ils lancent des commandes, créent des fichiers, installent des paquets. Si tu ne sais pas ce qu'est un package.json ou pourquoi le serveur tourne sur le port 5173, tu ne peux pas relire ce qu'un agent a fait, ni lui dire qu'il s'est trompé. On apprend la chaîne à la main pour pouvoir la diriger.

Pourquoi Vue.js#

Vue est un framework JavaScript qui règle deux problèmes précis.

1. La réactivité. Tu déclares une donnée, tu l'affiches, et quand la donnée change, l'affichage suit tout seul. Tu ne touches plus au DOM à la main.

2. Les composants réutilisables. Un bouton, une carte projet, une navbar : tu les écris une fois, tu les réutilises partout. Tu corriges à un seul endroit.

Un compteur, deux façons de faire#

Voici un compteur en JavaScript classique, sans framework.

<div id="app">
  <button id="btn">Compteur : <span id="count">0</span></button>
</div>

<script>
  let count = 0;
  const btn = document.getElementById('btn');
  const countSpan = document.getElementById('count');

  btn.addEventListener('click', () => {
    count++;
    countSpan.textContent = count;
  });
</script>

Ça fonctionne. Mais remarque la charge de travail : tu dois aller chercher les éléments, écouter le clic, et penser à mettre à jour l'affichage toi-même. Sur une page avec trente éléments qui dépendent les uns des autres, tu vas finir par en oublier un. C'est le bug numéro un des sites codés à la main.

Le même compteur en Vue :

<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>

<template>
  <button @click="count++">
    Compteur : {{ count }}
  </button>
</template>

<style scoped>
  button {
    font-weight: bold;
  }
</style>

Ce qui se passe, ligne par ligne :

• ref(0) crée une donnée réactive qui vaut 0 au départ. « Réactive » veut dire : Vue la surveille.
• @click="count++" attache un écouteur de clic. C'est l'équivalent de addEventListener, en une expression.
• {{ count }} affiche la valeur. Dès que count change, ce morceau de page se redessine. Tout seul.
• Aucun getElementById nulle part. Tu décris le résultat, Vue s'occupe du DOM.

Ce fichier s'appelle un Single-File Component (SFC), extension .vue. Il tient en trois blocs : <script setup> pour la logique, <template> pour le HTML, <style scoped> pour le CSS. Le mot scoped signifie que ce CSS ne s'applique qu'à ce composant : pas de style qui déborde sur le reste du site.

Le programme de ce chapitre#

Dans l'ordre des sous-chapitres :

1. Le terminal — se déplacer, créer des dossiers, lancer des commandes.
2. Node.js et npm — installer le moteur et le gestionnaire de paquets.
3. Installation — créer ton premier projet Vue et le lancer.
4. Extensions VS Code — configurer l'éditeur pour qu'il t'aide vraiment.
5. Structure d'un projet — comprendre chaque dossier généré.
6. Tailwind CSS — l'installer, puis premiers pas guidés.
7. Les briques de Vue — composants, ref, v-model, v-if, v-for, events, Vue Router.
8. Le déploiement — mettre le site en ligne sur Vercel.

Tout ça sert le fil rouge de l'année : ton portfolio. Le logo et les maquettes viennent du volet design ; ici, tu les transformes en site réel, en ligne, à ton nom.

Au programme de la première séance#

Trois objectifs, pas un de plus :

1. Te servir du terminal sans avoir peur de l'écran noir.
2. Installer ton premier projet Vue et le voir tourner dans le navigateur.
3. Configurer VS Code avec les bonnes extensions.

Récap#

• La toolchain moderne (terminal, Node, npm, Vite, Vue, Tailwind, Git, VS Code) est le standard du métier — et ce que les agents IA manipulent.
• Vue apporte la réactivité (l'affichage suit les données) et les composants réutilisables.
• Un composant Vue est un fichier .vue en trois blocs : <script setup>, <template>, <style scoped>.
• Le fil rouge : ton portfolio, codé en Vue + Tailwind, déployé sur Vercel.