Aller au contenu

Installation

Slides

Deck 5 — Installation du premier projet Vue (PDF)PDF

Objectif : créer ton premier projet Vue avec npm create vue@latest, le lancer dans le navigateur, et l'ouvrir dans VS Code.

Prérequis

Avant de commencer, trois choses :

  • Node.js en version LTS installé. Si node --version ne répond pas un numéro, reviens au chapitre Node.js et npm.
  • Ton terminal ouvert dans ~/repos. C'est là que vivent les projets JavaScript.
  • VS Code installé sur la machine.
cd ~/repos
node --version

Attention

Sous Windows, le terminal Laragon s'ouvre par défaut dans C:\laragon\www. Ne crée pas ton projet Vue là. Tape cd ~/repos avant tout le reste, et vérifie avec pwd où tu te trouves.

Créer le projet

Une seule commande :

npm create vue@latest

npm télécharge create-vue, l'assistant officiel de Vue, et te pose une série de questions.

Les questions, une par une

Voici ce que l'assistant affiche, dans l'ordre :

Nom du projet : › vue-project

Utiliser TypeScript ? › Oui / Non

Sélectionnez les fonctionnalités à inclure dans votre projet :
(↑/↓ pour naviguer, espace pour sélectionner, a pour tout sélectionner, entrée pour confirmer)
  ◻ Support de JSX
  ◻ Router (développement SPA)
  ◻ Pinia (gestion de l'état)
  ◻ Vitest (tests unitaires)
  ◻ Tests de bout en bout
  ◻ Linter (prévention des erreurs)
  ◻ Prettier (formatage du code)

Sélectionnez les fonctionnalités expérimentales à inclure :
  ◻ Remplacer Prettier par Oxfmt
  ◻ Vue 3.6 (version candidate)

Ignorer tout le code d'exemple et commencer avec un projet Vue vierge ? › Oui / Non

Les réponses pour ce cours

Nom du projet : mon-portfolio.

En minuscules, sans espace, sans accent. Les mots se séparent par un tiret. C'est à la fois le nom du dossier et le nom du paquet npm : un espace ou une majuscule et l'assistant refuse ou te repose la question.

Utiliser TypeScript ? → Non.

Fais attention : la réponse présélectionnée est Oui. Appuie sur la flèche pour choisir Non avant de valider. TypeScript est excellent, mais c'est un autre langage à apprendre par-dessus Vue ; ce n'est pas le moment.

Sélectionnez les fonctionnalités → coche uniquement Linter (prévention des erreurs) et Prettier (formatage du code). Rien d'autre.

Tu te déplaces avec les flèches, tu coches avec la barre d'espace, tu valides avec [ENTER]. Le Linter (ESLint, accompagné d'Oxlint) signale tes erreurs pendant que tu codes, Prettier remet ton code en forme tout seul. Les deux te font gagner du temps dès la première heure.

Et Router ? On l'ajoutera plus tard, quand ton portfolio aura plusieurs pages. Un chapitre entier lui est consacré. Pinia, Vitest, les tests de bout en bout et JSX ne servent pas à ce cours.

Fonctionnalités expérimentales → rien du tout. Valide avec [ENTER] sans rien cocher.

Ignorer tout le code d'exemple ? → Non.

On garde le code d'exemple : il sert de visite guidée du projet, et on le supprimera nous-mêmes au moment de construire le portfolio.

Note

L'assistant est traduit : si ton système est en anglais, tu verras « Project name », « Use TypeScript? », « Select features to include in your project ». Les questions et l'ordre sont exactement les mêmes. 🌍

Installer les dépendances et lancer le serveur

L'assistant termine en te donnant les commandes suivantes. Tape-les dans l'ordre :

cd mon-portfolio
npm install
npm run dev
  • cd mon-portfolio entre dans le dossier fraîchement créé.
  • npm install télécharge Vue, Vite et le reste dans node_modules/. Compte une poignée de secondes la première fois.
  • npm run dev démarre le serveur de développement.

Le terminal affiche quelque chose comme :

  VITE v8.3.0  ready in 849 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Ouvre http://localhost:5173 dans ton navigateur. Tu vois la page d'accueil générée par create-vue : le logo Vue en haut à gauche, le titre « You did it! », et une colonne de liens vers la documentation, l'écosystème et la communauté. C'est le code d'exemple qu'on a gardé.

Laisse cette page ouverte. À chaque fois que tu sauvegarderas un fichier du projet, elle se mettra à jour toute seule. C'est le rechargement à chaud, et c'est la raison d'être de Vite.

Arrêter et relancer le serveur

Tant que le serveur tourne, ton terminal est occupé : il ne te rendra pas la main. C'est normal.

  • Pour arrêter le serveur : clique dans le terminal et fais Ctrl + C (oui, Ctrl aussi sur Mac, pas Cmd).
  • Pour le relancer : npm run dev, depuis le dossier du projet.

Tu peux aussi ouvrir un deuxième terminal pour taper d'autres commandes pendant que le serveur tourne. C'est ce que font la plupart des développeurs.

Ouvrir le projet dans VS Code

Depuis le dossier du projet :

code .

Le point signifie « le dossier courant ». VS Code s'ouvre sur ton projet.

Astuce

Sur Mac, si code n'est pas reconnu, ouvre VS Code, fais Cmd + Shift + P, tape « Shell Command: Install 'code' command in PATH » et valide. Une seule fois, et c'est réglé pour toujours. 🍏

Il reste à installer les extensions qui rendent VS Code réellement utile pour Vue (Vue - Official, Tailwind CSS IntelliSense, ESLint, Prettier) : c'est l'objet du chapitre Extensions VS Code.

Ça ne marche pas ?

Attention

node : commande introuvable / n'est pas reconnu Node n'est pas installé, ou ton terminal date d'avant l'installation. Ferme-le, rouvre-en un neuf, retente. Si ça persiste, reprends le chapitre Node.js et npm.

Le port 5173 est occupé. Vite te le dit et bascule tout seul sur 5174, 5175… Utilise le port qu'il affiche. Si tu veux récupérer 5173, c'est qu'un ancien serveur tourne encore : retrouve son terminal et fais Ctrl + C.

Le projet a atterri dans www. Tu as lancé la commande sans avoir fait cd ~/repos. Ferme le serveur, déplace le dossier du projet dans ~/repos (glisser-déposer dans l'explorateur suffit), puis relance npm run dev depuis son nouvel emplacement.

Le nom du projet contient un espace ou une majuscule. L'assistant te repose la question sous la forme « Nom du package : » avec une proposition corrigée. Le plus simple : supprime le dossier et recommence avec un nom propre, tout en minuscules avec des tirets.

npm run dev renvoie une erreur de module introuvable. Tu as sauté npm install. Tape-le, puis relance.

npm run dev dit « Missing script: dev ». Tu n'es pas dans le bon dossier. Vérifie avec pwd (ou ls : tu dois voir package.json), puis cd dans le dossier du projet.

Récap : les 4 commandes

# on se place d'abord dans le bon dossier
cd ~/repos

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

À retenir :

  • Toujours depuis ~/repos, jamais depuis www.
  • Dans l'assistant : TypeScript → Non, et on coche uniquement Linter et Prettier.
  • Ctrl + C arrête le serveur, npm run dev le relance.
  • http://localhost:5173 est l'adresse de ton projet pendant le développement.

Au chapitre suivant, Extensions VS Code, on équipe l'éditeur ; on ouvrira les dossiers générés juste après, au chapitre Structure d'un projet.