Vue.js

Installation

Installer Vue.js avec la CLI, comprendre Vite et découvrir la structure d'un projet

Créer un projet Vue

Vue fournit un outil officiel pour générer un projet prêt à l'emploi :

npm create vue@latest mon-projet
cd mon-projet
npm install
npm run dev

Au lancement, la CLI vous pose quelques questions (TypeScript, Vue Router, Pinia…). Pour ce cours, activez TypeScript et laissez le reste par défaut dans un premier temps.

L'application est ensuite accessible sur http://localhost:5173.

En Node.js, vous compilez votre TypeScript avec tsc et Node exécute le JavaScript résultant directement — les fichiers restent sur votre machine, le système de fichiers est accessible, require() fonctionne.

Le navigateur, lui, ne peut pas faire ça :

Il ne comprend ni TypeScript, ni les fichiers .vue — il ne parle que HTML, CSS et JavaScript standard
Il n'a pas accès au système de fichiers : il ne peut pas aller "chercher" un fichier import sur le disque comme Node
Il ne connaît pas les alias de chemin comme @/components/...
Chaque import non résolu est une requête HTTP : sans bundler, charger 200 modules ferait 200 requêtes réseau

Un bundler résout ces problèmes : il prend tous vos fichiers sources (.vue, .ts, .css…), les transforme en JavaScript compréhensible par le navigateur, et les assemble en un petit nombre de fichiers optimisés.

Sources (dev)                     Sortie (navigateur)
─────────────────                 ───────────────────
src/main.ts          ┐
src/App.vue          ├─ Vite ──►  dist/assets/index-abc123.js
src/components/*.vue │            dist/assets/style-def456.css
node_modules/...     ┘            dist/index.html

Vue utilise Vite par défaut comme bundler.

Ce qui distingue Vite des anciens outils (Webpack, etc.)

Caractéristique	Description
Démarrage instantané	Sert les fichiers à la demande via les modules ES natifs, sans build complet au démarrage
Hot Module Replacement (HMR)	Met à jour uniquement le module modifié, sans recharger la page entière
Build de production rapide	Utilise Rollup en production pour générer des bundles optimisés

En pratique, Vite est transparent : vous lancez npm run dev pour le développement et npm run build pour générer les fichiers prêts à déployer.

Structure du projet

Après l'installation, voici les fichiers qui comptent :

mon-projet/
├── index.html          ← point d'entrée HTML
├── src/
│   ├── main.ts         ← point d'entrée JavaScript
│   ├── App.vue         ← composant racine
│   ├── assets/         ← images, fonts, CSS global
│   ├── components/     ← composants réutilisables
│   └── views/          ← pages (si Vue Router activé)
├── public/             ← fichiers servis tels quels (favicon…)
└── vite.config.ts      ← configuration Vite

index.html

C'est la seule page HTML du projet. Elle contient un <div id="app"> vide : c'est là que Vue va injecter toute l'application.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

C'est le point d'entrée JavaScript. Il crée l'instance Vue et la monte sur le <div id="app">.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

createApp(App) — crée l'application à partir du composant racine App.vue
mount('#app') — l'injecte dans le <div id="app"> du HTML

C'est aussi ici que vous brancherez les plugins plus tard (Vue Router, Pinia…).

App.vue

C'est le composant racine, celui depuis lequel toute l'application se construit. Dans les chapitres suivants, vous apprendrez à le découper en composants.

Les fichiers `.vue`

Un fichier .vue est ce qu'on appelle un Single File Component (SFC) : il regroupe en un seul fichier tout ce qui concerne un composant — sa structure, sa logique et ses styles.

<template>
  <!-- Le HTML du composant -->
  <p>{{ message }}</p>
</template>

<script setup lang="ts">
// La logique TypeScript
const message = 'Bonjour Vue !'
</script>

<style scoped>
/* Les styles CSS (optionnel) */
p {
  color: green;
}
</style>

Chaque bloc a un rôle précis :

Bloc	Rôle	Obligatoire
`<template>`	Le HTML affiché par le composant	Oui
`<script setup lang="ts">`	La logique TypeScript (données, fonctions…)	Non
`<style scoped>`	Les styles CSS, isolés à ce composant	Non

Le mot-clé scoped sur le <style> est important : il fait que les styles n'affectent que ce composant, sans déborder sur le reste de l'application.

Ces fichiers .vue ne sont pas compréhensibles nativement par le navigateur — c'est Vite qui les transforme en JavaScript standard à la compilation.

Introduction

‘Découvrir les concepts frontend et le framework Vue.js’

Les bases de Vue 3

Comprendre la réactivité, les directives et le cycle de vie des composants Vue 3