Aller au contenu

Introduction à Vue.js : Quand JavaScript Devient Enfin Civilisé 🎭

Pourquoi Vue.js ? (et pourquoi ton vanilla JS pleure dans un coin)

Alors là, on va parler de Vue.js (prononcé "view", pas "vu-é" comme ton oncle Roger). C'est quoi ce truc ? Un framework JavaScript qui va te faire oublier que tu as passé des années à manipuler le DOM comme un sauvage. 🥴

Vue, c'est le framework qui dit : "Yo, pourquoi tu te casses la tête avec document.getElementById() et addEventListener() quand tu pourrais juste... décrire ce que tu veux ?"

Les Deux Superpouvoirs de Vue

1. Rendu Déclaratif 📜
Tu décris ce que tu veux afficher, pas comment le faire. Vue se charge du sale boulot pendant que tu sirottes ton café.

2. Réactivité ⚡
Tu changes une variable JavaScript ? PAF, l'interface se met à jour automatiquement. Pas besoin de toucher au DOM comme un barbare.

L'Exemple qui Tue : Counter Edition

Version Vanilla JS (aka "l'âge de pierre") 🦖

Voilà comment un noob ferait un compteur en JavaScript pur :

<!DOCTYPE html>
<html>
<head>
    <title>Counter Préhistorique</title>
</head>
<body>
    <div id="app">
        <button id="btn">Count is: <span id="count">0</span></button>
    </div>

    <script>
        // Bienvenue en 2010, boomer 👴
        let count = 0;
        const btn = document.getElementById('btn');
        const countSpan = document.getElementById('count');

        btn.addEventListener('click', () => {
            count++;
            countSpan.textContent = count; // On manipule le DOM à la main comme des sauvages
        });
    </script>
</body>
</html>

Problèmes de cette approche :

  • Tu dois manuellement mettre à jour le DOM à chaque changement (≖_≖ )
  • Dès que ton app grandit, c'est le bordel total
  • Tu vas oublier de mettre à jour un élément quelque part, garanti à 100% 💀

Version Vue.js (aka "l'illumination") ✨

Maintenant, regarde la même chose avec Vue :

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

// Un simple compteur réactif
const count = ref(0)
</script>

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

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

CE QUI SE PASSE ICI (prends des notes, c'est gratuit) :

  • ref(0) crée une valeur réactive. Quand elle change, Vue met à jour l'interface automatiquement 🧙
  • @click="count++" : tu incrémentes directement la valeur. Pas de addEventListener, pas de querySelector, que dalle.
  • {{ count }} : affichage automatique. Tu changes count ? L'affichage suit instantanément.
  • Tout est dans un seul fichier (logique + template + style). C'est ce qu'on appelle un Single-File Component (SFC).

Différence clé : En vanilla, tu dis au navigateur comment changer le DOM. Avec Vue, tu déclares ce que tu veux et Vue se démerde. (ง'̀-'́)ง

Installation : Let's Go 🚀

Prérequis (lis bien, c'est pas optionnel)

  • Node.js installé (version ^20.19.0 ou >=22.12.0)
  • Savoir ouvrir un terminal (si c'est trop compliqué, on a un problème) 🫠

Vérifie que Node est installé :

node --version

Si ça affiche un numéro de version, GG. Sinon, va sur nodejs.org et installe-le, champion.

Créer ton Premier Projet Vue

Ouvre ton terminal dans le dossier où tu veux créer ton projet, puis lance :

npm create vue@latest

Cette commande va installer create-vue, l'outil officiel de scaffolding. Tu vas avoir des questions, genre :

✔ Project name: … mon-projet-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Conseil du gourou : Pour l'instant, tape "No" partout sauf pour ESLint (garde-le activé, ça te sauvera la vie). On ajoutera les autres trucs plus tard. 😎

Lancer le Projet

Une fois le projet créé, entre dans le dossier et installe les dépendances :

cd mon-projet-vue
npm install

Puis lance le serveur de développement :

npm run dev

BAM 💥, ton projet tourne maintenant sur http://localhost:5173. Ouvre ton navigateur et admire.

Anatomie d'un Fichier .vue (aka SFC) 📋

Un Single-File Component (SFC) contient trois sections :

<script setup>
// 🧠 LOGIQUE JAVASCRIPT
import { ref } from 'vue'
const message = ref('Hello Vue!')
</script>

<template>
  <!-- 🎨 TEMPLATE HTML -->
  <h1>{{ message }}</h1>
</template>

<style scoped>
/* 💅 STYLES CSS (scoped = limité à ce composant uniquement) */
h1 {
  color: hotpink;
}
</style>

Pourquoi c'est génial ? Tout est au même endroit. Plus besoin de jongler entre 12 fichiers pour modifier un bouton. (ง ͠° ͟ل͜ ͡°)ง

Build pour la Production 📦

Quand ton projet est prêt à être déployé :

npm run build

Ça crée un dossier ./dist avec une version optimisée, minifiée, prête à être mise en ligne. Tu peux la balancer sur Vercel, Netlify, GitHub Pages, peu importe. 🌍

TL;DR (Pour les Flemmards) 🍿

  • Vue.js = framework JavaScript pour construire des interfaces réactives
  • Réactivité = change une variable → interface se met à jour toute seule
  • SFC (Single-File Component) = tout dans un fichier .vue (logique + template + style)
  • Installation : npm create vue@latest → npm install → npm run dev
  • Vanilla JS = tu manipules le DOM comme un paysan. Vue = tu déclares ce que tu veux, Vue fait le taff.

Voilà, t'es armé. Maintenant, va coder au lieu de lire des docs comme un touriste. (ಠ_ಠ)ノ