Vite - Le moteur de propulsion du projet

Au NOVA LAB, nous utilisons les outils les plus modernes. Vite est notre "moteur de propulsion" - il compile le code plus vite qu'une fusée n'atteint la première vitesse cosmique !

Pourquoi un moteur ? Le navigateur ne comprend ni les fichiers .vue ni TypeScript, et une application de mission se compose de centaines de modules qui s'importent les uns les autres. Les anciens outils, appelés bundlers, assemblaient toute l'application en un seul paquet avant d'afficher quoi que ce soit : plus le projet était gros, plus tu attendais le démarrage du serveur et chaque correction.

Qu'est-ce que Vite ?

Vite (oui, le mot français, qui se prononce comme en français) est un outil de build de nouvelle génération. Il a été créé par Evan You - le même créateur que Vue.js. Vite réunit deux rôles : le serveur de développement, sur lequel tu testes l'application, et la construction de la version de production.

Pourquoi Vite est-il si rapide ?

1. Native ES Modules - en développement, il sert ton code au navigateur sous forme de modules ES, à la demande, sans bundler toute l'application ; les dépendances de node_modules sont pré-bundlées une seule fois, au premier démarrage
2. Hot Module Replacement - quand tu enregistres un fichier, il remplace uniquement le module modifié, sans recharger la page, quelle que soit la taille du projet
3. Outils natifs - jusqu'à la version 7, Vite utilisait esbuild (qui, selon la documentation de l'époque, pré-bundlait les dépendances 10 à 100 fois plus vite que les bundlers écrits en JavaScript) et Rollup pour le build de production ; depuis Vite 8, les deux rôles ont été repris par Rolldown, un bundler écrit en Rust, et le code est traité par Oxc

Le carburant : Node.js

Le moteur a besoin de carburant, et ce carburant, c'est Node.js. Avant de lancer l'assistant de projet, vérifie dans le terminal quelle version tu as installée :

1node --version

La documentation de Vue exige actuellement Node.js 22.18 ou plus récent dans la branche 22, ou bien 24.12 ou plus récent. Sur une version plus ancienne, les outils peuvent afficher des avertissements ou refuser complètement de démarrer, alors fais toujours cette étape en premier.

Initialiser un projet de mission

Pour lancer un nouveau projet de système, utilise le protocole de démarrage. Cette commande télécharge et exécute create-vue, l'assistant officiel de création de projets Vue, et le suffixe @latest garantit sa version la plus récente :

1npm create vue@latest

L'assistant va te poser des questions sur la configuration de la mission. Tu coches les fonctionnalités dans la liste avec la barre d'espace et tu valides avec Entrée :

1◇  Project name (target directory):
2│  mars-control-system
3│
4◇  Use TypeScript?
5│  Yes
6│
7◇  Select features to include in your project:
8│  Router (SPA development), Pinia (state management), Vitest (unit testing), Linter (error prevention), Prettier (code formatting)
9│
10◇  Select experimental features to include in your project:
11│  none
12│
13◇  Skip all example code and start with a blank Vue project?
14│  No

Nous laissons JSX de côté, car avec Vue on écrit des templates, et nous n'activons pas de fonctionnalités expérimentales sur une mission de production. Les anciennes versions de l'assistant posaient les mêmes questions une par une, par exemple "Add TypeScript? … Yes" ou "Add Pinia? … Yes" - la forme a changé, les choix sont restés les mêmes.

Structure du système de mission

Une fois son travail terminé, l'assistant laisse un dossier avec cette structure :

1mars-control-system/
2├── public/           # Ressources statiques (icônes, manifestes)
3├── src/
4│   ├── assets/       # Graphismes, styles CSS
5│   ├── components/   # Modules d'interface
6│   ├── views/        # Écrans principaux
7│   ├── router/       # Configuration de la navigation
8│   ├── stores/       # Bases de données Pinia
9│   ├── App.vue       # Composant principal
10│   └── main.ts       # Point d'entrée du système
11├── index.html        # Modèle HTML
12├── package.json      # Manifeste des dépendances
13├── vite.config.ts    # Configuration du moteur Vite
14└── tsconfig.json     # Configuration TypeScript

Remarque que index.html se trouve à la racine, et non dans public/ - pour Vite, c'est le point d'entrée de l'application. Les dossiers router/ et stores/ n'apparaissent que si tu choisis Router et Pinia. La hiérarchie des composants commence par App.vue : en dessous se trouvent les composants de layout, comme l'en-tête et la barre latérale, qui entourent les vues de views/, et les vues sont faites des plus petits modules de components/, comme les boutons et les cartes.

Configuration du moteur

Le fichier vite.config.ts (ou vite.config.js sans TypeScript) indique à Vite comment travailler. La fonction defineConfig donne des suggestions à ton éditeur, le plugin vue() du paquet @vitejs/plugin-vue apprend à Vite à comprendre les fichiers .vue, et l'alias @ est un raccourci vers le dossier src :

1import { fileURLToPath, URL } from 'node:url'
2
3import { defineConfig } from 'vite'
4import vue from '@vitejs/plugin-vue'
5
6export default defineConfig({
7  plugins: [vue()],
8  resolve: {
9    alias: {
10      '@': fileURLToPath(new URL('./src', import.meta.url))
11    }
12  }
13})

Les fonctions fileURLToPath et URL du module intégré node:url transforment ./src en chemin complet sur le disque. L'assistant ajoute aussi ici le plugin vueDevTools(), sur lequel nous reviendrons avec les outils de diagnostic. Le code des composants ne change pas - la configuration ne concerne que l'outil - mais un import depuis un fichier profondément imbriqué devient court :

1// au lieu de '../../components/ModuleCard.vue'
2import ModuleCard from '@/components/ModuleCard.vue'

L'alias fonctionne de la même façon depuis n'importe quel endroit du projet, donc après avoir déplacé un fichier dans un autre dossier, tu n'as pas à corriger ses chemins.

Démarrer le système

Il reste trois commandes : entrer dans le dossier du projet, installer les dépendances et démarrer le serveur de développement :

1cd mars-control-system
2npm install           # Charger les modules
3npm run dev           # Lancer en mode développement

Le système démarrera sur http://localhost:5173 - notre simulateur local. Modifie une inscription dans n'importe quel composant et enregistre le fichier : le HMR remplacera le module sans recharger la page. Je te recommande de garder le serveur allumé dans une fenêtre de terminal séparée pendant toute ta session de travail. Dans la prochaine leçon, nous regarderons l'intérieur des fichiers .vue que le plugin Vue compile pour le navigateur.

Dans l'éditeur ci-dessous, tape un message dans le champ de texte ou modifie n'importe quelle inscription dans le code, et observe l'aperçu se rafraîchir sans rechargement.

Retiens ceci : npm create vue@latest construit la fusée, npm install fait le plein de ses modules, et npm run dev allume le moteur Vite sur le port 5173.

1<template>
2  <div class="nova-lab">
3    <h1>Vite + Vue.js - Configuration rapide comme l'éclair</h1>
4
5    <section class="info-panel">
6      <h2>Pourquoi Vite ?</h2>
7      <div class="feature-grid">
8        <div class="feature" v-for="feature in viteFeatures" :key="feature.title">
9          <span class="icon">{{ feature.icon }}</span>
10          <h3>{{ feature.title }}</h3>
11          <p>{{ feature.description }}</p>
12        </div>
13      </div>
14    </section>
15
16    <section class="demo-panel">
17      <h2>Hot Module Replacement en action</h2>
18      <p>Édite le code et vois les changements instantanément !</p>
19      <div class="hmr-demo">
20        <input v-model="message" placeholder="Écris un message..." />
21        <p class="preview">{{ message || 'Ton message apparaîtra ici...' }}</p>
22      </div>
23    </section>
24  </div>
25</template>
26
27<script setup>
28import { ref } from 'vue'
29
30const message = ref('')
31
32const viteFeatures = [
33  {
34    icon: '',
35    title: 'Démarrage rapide comme l\'éclair',
36    description: 'Le serveur démarre en quelques millisecondes grâce aux modules ES natifs'
37  },
38  {
39    icon: '',
40    title: 'Hot Module Replacement',
41    description: 'Changements visibles instantanément sans rechargement de page'
42  },
43  {
44    icon: '',
45    title: 'Build optimisé',
46    description: 'Rolldown en coulisses (Vite 8+) pour les bundles de production'
47  },
48  {
49    icon: '',
50    title: 'TypeScript',
51    description: 'Support de TypeScript prêt à l\'emploi'
52  }
53]
54</script>
55
56<style>
57.nova-lab {
58  min-height: 100vh;
59  background: #0a0e27;
60  color: #e0e0e0;
61  padding: 2rem;
62  font-family: system-ui, sans-serif;
63}
64
65h1 {
66  color: #00ff88;
67  text-align: center;
68  margin-bottom: 2rem;
69}
70
71section {
72  background: rgba(26, 30, 55, 0.8);
73  border: 1px solid #00b4d8;
74  border-radius: 12px;
75  padding: 1.5rem;
76  margin-bottom: 1.5rem;
77  max-width: 900px;
78  margin-left: auto;
79  margin-right: auto;
80}
81
82h2 {
83  color: #00b4d8;
84  margin-top: 0;
85}
86
87.feature-grid {
88  display: grid;
89  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
90  gap: 1rem;
91}
92
93.feature {
94  background: rgba(0, 180, 216, 0.1);
95  padding: 1rem;
96  border-radius: 8px;
97  text-align: center;
98}
99
100.feature .icon {
101  font-size: 2rem;
102}
103
104.feature h3 {
105  color: #00ff88;
106  margin: 0.5rem 0;
107}
108
109.feature p {
110  font-size: 0.9rem;
111  color: #aaa;
112  margin: 0;
113}
114
115.hmr-demo {
116  margin-top: 1rem;
117}
118
119.hmr-demo input {
120  width: 100%;
121  padding: 1rem;
122  background: #1a1e37;
123  border: 2px solid #00b4d8;
124  border-radius: 8px;
125  color: #fff;
126  font-size: 1rem;
127}
128
129.hmr-demo input:focus {
130  outline: none;
131  border-color: #00ff88;
132}
133
134.preview {
135  margin-top: 1rem;
136  padding: 1rem;
137  background: rgba(0, 255, 136, 0.1);
138  border-radius: 8px;
139  color: #00ff88;
140  font-style: italic;
141}
142</style>