Chapitre 1 : Prépare ton environnement et crée un premier composant

Notions Vue.js présentées : Structure d’un composant (template/script/style), props, directives de base (v-bind: ou :)

Bienvenue dans ta première étape vers la maîtrise de Vue.js ! Ce chapitre te guide pour installer l’environnement de développement moderne et créer ton premier composant fonctionnel. À la fin, tu auras une application Vue.js qui tourne localement et affiche une tâche statique, la base de ton futur mini Kanban de gestion de tâches. Pas de CDN, que du solide avec l’outil officiel !

Étape 1 : Installe Node.js sur ton système

Vue.js repose sur Node.js pour gérer les dépendances et l’outil de build. Choisis la version LTS (Long Term Support) depuis nodejs.org.

Sur Windows :
– Télécharge le .msi et lance l’installateur
– Coche « Add to PATH » pendant l’installation
– Redémarre ton terminal (PowerShell ou Invite de commandes)

Sur macOS :
– Utilise le .pkg ou Homebrew : brew install node
– Vérifie dans le Terminal

Sur Linux (Ubuntu/Debian) :

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Vérification universelle :
Ouvre ton terminal et tape :

node -v
npm -v

Tu dois voir des numéros de version (ex: v20.x.x et 10.x.x). Sinon, redémarre ton terminal ou vérifie le PATH.

Étape 2 : Crée ton projet Vue.js moderne

Dans un dossier de travail, lance la commande officielle :

npm create vue@latest mon-mini-kanban

Réponds y + Entrée à la question qui t’est posé :

Need to install the following packages:
create-vue@3.18.3
Ok to proceed? (y)

Suis les instructions pour choisir les fonctionnalités de à embarquer dans ton projet :

Vue.js : les options a installer pour démarrer

Réponds aux questions :
– TypeScript ? Non (pour rester simple)
– Support de JSX ? Non
– Router ? Non (on l’ajoute plus tard)
– Pinia ? Non
– Vitest ? Oui (pour les tests)
– Test de bout en bout ? Non
– ESLint ? Oui
– Prettier ? Oui

Entre dans le dossier et installe :

cd mon-mini-kanban
npm install
npm run format
npm run dev

Initialises Git dans le répertoire de ton projet

git init && git add -A && git commit -m "initial commit"

Ton navigateur s’ouvre sur `http://localhost:5173` avec une app Vue.js par défaut. Bravo, ton environnement est prêt !

Étape 3 : Comprends la structure d’un composant Vue.js

Ouvre le projet dans VS Code (code .). Chaque composant .vue = Single File Component (SFC) a trois sections :

<script setup>
// Logique JavaScript (état, fonctions)
</script>

<template>
  <!-- HTML avec directives Vue -->
</template>

<style scoped>
/* CSS local au composant */
</style>

<script setup> = syntaxe moderne et concise. scoped = styles privés au composant.

Étape 4 : Crée ton premier composant TaskItem

Crée src/components/TaskItem.vue avec le code ci-dessous. :

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

// Props pour recevoir les données de la tâche
defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: 'Pas de description'
  }
})
</script>

<template>
  <div class="task-card">
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
    <span class="status todo">À faire</span>
  </div>
</template>

<style scoped>
.task-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

h3 {
  margin: 0 0 0.5rem 0;
  color: #1e293b;
}

p {
  color: #64748b;
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

.status {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status.todo {
  background: #fef3c7;
  color: #92400e;
}
</style>

Étape 5 : Utilise ton composant dans l’app principale

Modifie src/App.vue pour importer et utiliser TaskItem :

<script setup>
import TaskItem from './components/TaskItem.vue'
</script>

<template>
  <div id="app">
    <h1>Mon Mini Kanban Vue.js</h1>

    <TaskItem title="Installer Node.js" description="Version LTS sur Windows/Mac/Linux" />

    <TaskItem title="Créer TaskItem" description="Props + structure SFC + CSS scoped" />
  </div>
</template>

<style>
#app {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: system-ui, sans-serif;
}
h1 {
  color: #788fdd;
  text-align: center;
  margin-bottom: 2rem;
}
</style>

Vérifie le résultat

Sauvegarde et observe le rechargement automatique (hot reload). Tu vois maintenant deux cartes de tâches stylées ! Tu as créé ton premier composant Vue.js avec :

–  Props : passage de données (title, description)
–  Directives : {{ }} pour l’interpolation
–  Structure SFC : Single File Component complet
–  Scoped CSS : styles locaux

Exercice de validation : Ajoute une troisième TaskItem avec tes propres données. Change la couleur du statut dans le CSS.

Ton mini Kanban a sa première brique ! Le chapitre 2 t’attend pour rendre ces tâches dynamiques avec un formulaire d’ajout. Prêt à passer à la vitesse supérieure ?