Créer un projet

Lancer l'assistant de création

Dans le dossier où vous souhaitez créer le projet, lancez l'assistant officiel. 

npm create vue@latest

Cette commande lance la création d'un nouveau projet avec la dernière version stable (@latest) de Vue.js et vous guide étape par étape dans sa configuration.

Configuration du projet

Lorsque vous lancez la création d'un nouveau projet avec le gestionnaire de paquets npm, un assistant interactif s'ouvre pour vous permettre de configurer votre projet à l'aide de cases à cocher :

  1. Project name (target directory) : C'est le nom du dossier qui contiendra votre projet. Si vous tapez mon-projet, un dossier du même nom sera créé dans le répertoire courant.
  2. Select features to include in your project : Ici, vous choisissez les fonctionnalités supplémentaires que Vue doit préparer dès la création du projet. Vous pouvez naviguer dans la liste avec les flèches et valider/décocher avec la barre d'espace.
    • TypeScript : Permet d'utiliser TypeScript au lieu de JavaScript classique. TypeScript ajoute un typage statique au code, ce qui aide à détecter des erreurs avant l'exécution.
      Exemple : au lieu de juste dire qu'une variable est un nombre dans un commentaire, TypeScript l'impose vraiment.
    • JSX Support : Active la possibilité d'écrire du HTML directement dans le JavaScript avec une syntaxe appelée JSX. C'est surtout utilisé par React, mais Vue le supporte aussi.
      Exemple : écrire return <button>Cliquez-moi</button> directement dans le code JS.
    • Router (SPA development) : Ajoute Vue Router, un système de navigation interne pour gérer plusieurs pages sans recharger le site.
      Exemple : passer de /accueil à /contact sans que la page se recharge.
    • Pinia (state management) : Ajoute Pinia, l'outil officiel de gestion d'état dans Vue. Utile pour partager des données entre plusieurs composants.
      Exemple : un panier d'achat affiché en haut de l'écran, accessible depuis n'importe quelle page.
    • Vitest (unit testing) : Installe Vitest, un outil pour créer et exécuter des tests automatiques sur votre code.
      Exemple : vérifier que la fonction additionner(2, 3) renvoie bien 5.
    • End-to-End Testing : Configure des outils pour tester l'application du point de vue de l'utilisateur final.
      Exemple : simuler un vrai clic sur un bouton et vérifier qu'une page s'ouvre.
    • ESLint (error prevention) : Ajoute un linter qui analyse votre code pour détecter des erreurs et incohérences.
      Exemple : signaler si vous utilisez une variable qui n'existe pas, ou si vous oubliez un ;.
    • Prettier (code formatting) : Ajoute un formateur automatique qui harmonise la mise en forme du code.
      Exemple : uniformiser les indentations, guillemets, ou espaces.
  3. Select experimental features to include in your project : Ce sont des fonctionnalités en cours de développement, donc instables.
    • Oxlint (experimental) : Un linter très rapide écrit dans un langage bas niveau pour accélérer les analyses de code.
    • rolldown-vite (experimental) : Une nouvelle génération du moteur interne de Vite. Potentiellement plus rapide, mais non finalisée.
  4. Skip all example code and start with a blank Vue project ? : Ne pas ajouter d'exemple et de page d'accueil pré-faite au projet (idéal pour démarrer un projet vierge).

Installer les dépendances

Une fois le projet créé, il ne contient pas encore les fichiers nécessaires au fonctionnement des outils sur lesquels il s'appuie. Par exemple, Vue utilise Vite pour lancer le serveur de développement et optimiser le code, ainsi que d'autres modules qui gèrent la compatibilité, la compilation ou le formatage.

Pour installer les dépendances, placez-vous dans le dossier du projet et lancez l'installation avec les commandes suivantes : 


                cd dossier-de-mon-projet-vuejs
                npm install

Comment le gestionnaire de paquets sait quelles dépendances installer ?

Quand vous créez un projet avec npm, l'assistant génère un fichier package.json. Ce fichier contient la liste des dépendances nécessaires, avec leurs noms et leurs numéros de version. Il ne contient pas le code de ces dépendances, mais seulement les références pour que npm sache quoi télécharger.

npm se connecte à un registre en ligne appelé npm registry. Il s'agit d'une immense bibliothèque publique qui héberge des centaines de milliers de modules JavaScript prêts à l'emploi. Lorsqu'on exécute la commande npm install, npm lit la liste des dépendances dans le package.json, puis télécharge les versions appropriées depuis le registre.

Pourquoi les dépendances sont automatiquement exclues des dépôts GIT ?

Les dépendances peuvent peser plusieurs centaines de mégaoctets et se mettre à jour fréquemment, ce qui rend leur partage lourd et propice aux conflits. On partage donc uniquement le fichier package.json, afin que chaque développeur puisse recréer localement l'environnement complet avec npm install. C'est pourquoi le dossier node_modules, qui contient les dépendances installées, est exclu par défaut du suivi Git via .gitignore.

Démarrer le serveur de développement

Lancez le serveur de développement. Il réagit instantanément à vos modifications et recharge la page sans nécessité de la rafraîchir manuellement. 

npm run dev

Ouvrez l'URL affichée dans le terminal, par défaut quelque chose comme http://localhost:5173.

Vite

Nous avons déjà mentionné Vite lors de la section sur les dépendances nécessaires à Vue. Vite est un outil moderne conçu pour rendre le travail des développeurs plus rapide et plus agréable lorsqu'ils créent un site ou une application. Vite réunit dans un seul environnement trois composants puissants :

Bundler

Un bundler regroupe tous les fichiers d'un projet (HTML, JavaScript, CSS, images, polices) en un ensemble optimisé prêt à être mis en ligne. Cette optimisation permet de réduire le nombre de fichiers à charger, d'accélérer l'affichage et d'améliorer la compatibilité entre navigateurs. Avec la configuration par défaut de Vite (qui s'appuie sur Rollup pour le bundling en production), on retrouve notamment :

Des outils comme Webpack ou Parcel ont longtemps été utilisés pour ce travail, mais ils demandent souvent plus de configuration et démarrent plus lentement. Vite, conçu par Evan You (le créateur de Vue.js), s'appuie sur esbuild pour le développement et Rollup pour le build de production. Il adopte ainsi une approche plus rapide et plus simple, particulièrement bien adaptée aux projets Vue.

Transpiler

Un transpiler transforme du code écrit avec des fonctionnalités récentes ou dans un autre langage (comme TypeScript ou JSX) en JavaScript compatible avec les navigateurs ciblés. Par exemple, si vous utilisez une nouveauté du langage que certains navigateurs ne comprennent pas encore, le transpiler la convertira en une syntaxe plus ancienne mais équivalente. Vite utilise par défaut esbuild pour cette étape, ce qui lui permet de traduire le code presque instantanément. En mode développement, cette transpilation est réalisée à la volée, uniquement si nécessaire, pour maximiser la vitesse. En mode production, Vite passe par un processus complet d'optimisation afin de garantir la compatibilité et les meilleures performances.

Serveur de développement

Vite ne se contente pas de regrouper et de transformer le code. Il intègre aussi un serveur de développement qui permet de lancer le projet localement comme s'il était déjà en ligne. Ce serveur surveille les fichiers du projet et applique le Hot Module Replacement (HMR), qui met à jour automatiquement la page dans le navigateur dès qu'une modification est enregistrée. La plupart du temps, seule la partie modifiée est remplacée à chaud, sans rechargement complet. Dans certains cas particuliers (par exemple après un changement dans index.html ou la configuration), un rafraîchissement complet de la page reste nécessaire.

Résumé de la procédure

Dans le terminal :

  1. Depuis le dossier où vous stockez vos projets, lancez l'assistant de création et sélectionnez les options souhaitées pour configurer le projet : 
    npm create vue@latest
  2. Placez-vous dans le dossier du projet que vous venez de créer : 
    cd dossier-de-mon-projet-vuejs
  3. Installer les dépendances nécessaires au bon fonctionnement de Vue.js : 
    npm install
  4. Démarrer le serveur de développement : 
    npm run dev
  5. Ouvrez l'URL affichée dans le terminal : par défaut quelque chose comme http://localhost:5173