Mitium

Appearance

1. Création de nouveau projet ​

Présentation ​

Dans ce chapitre, nous allons voir comment créer un nouveau projet Vue.js.

Le framework Vue.js, tout comme la plupart des frameworks front-end modernes, nous accompagne dans la création et la configuration d’un nouveau projet.

INFO

📖 Le développement avec Vue.js se fait au sein d’un projet Node.js. Ce cours s’appuie sur la version 20.10 de Node.js. Si vous n’êtes pas familier avec l’utilisation de Node.js, vous pouvez consulter l'annexe de cours à ce sujet.

Aborder un nouveau projet sur une technologie Node.js n’est en effet pas aussi simple que lorsqu’il s’agissait simplement de créer son fichier HTML, éventuellement accompagné de fichiers CSS et Javascript rédigés à côté.

Un projet utilisant un framework Javascript moderne va également recourir à l’usage d’un bundler, comme Vite. Par conséquent, il devra disposer d’une configuration associée, définissant, entre autre, comment cette outil doit compiler notre projet, où trouver nos fichiers à conserver hors de cette compilation, ou encore la manière de traiter les fichiers spécifiques à Vue.js.

TIP

👉 Vous trouverez plus d’information sur les bundler, et un exemple de configuration du bundler Webpack dans l'annexe de cours dédié. Nous ne couvrirons pas la configuration de Vite, bundler aujourd'hui utiliser par Vue.js. La configuration proposée de base par Vue.js à la création du projet suffira pour aborder l'ensemble des concepts qui suivront.

En tant que projet Node.js, il faudra également définir un fichier package.json renseignant des informations sur les bibliothèques dont dépend le projet et éventuellement sur la manière de l’exécuter, etc.

Bien sûr, toutes ces configurations ne vous parlent peut-être pas. Mais pas de panique, Vue.js dispose d’un outil CLI (Command Line Interface) permettant de nous guider dans la création de notre projet.

Créer un projet Vue.js ​

Pour créer un nouveau projet :

  1. Assurez-vous d’avoir Node.js et Git d’installés sur votre machine. Vous devriez être en mesure d’exécuter les commandes node --version, npm --version et git --version depuis un terminal de commande.

WARNING

Sur Windows utilisez bien l’installeur msi pour votre installation de Node.js, sinon vous risquez de ne pas avoir les variables d’environnements nécessaires pour utiliser Node.js dans votre terminal.

  1. Commencez par ouvrir un terminal.

  2. Rendez vous dans le dossier dans lequel vous souhaitez placer votre projet dans le terminal. Notez que lors de la création du projet, Vue.js créera un sous-dossier supplémentaire englobant l’application et portant le nom de votre projet.

  3. Une fois au bon endroit, exécutez la commande suivante :

jsx
npm create vue@latest

INFO

📌 Si vous n'avez jamais créé de projet Vue.js auparavent, la commande vous demandera si elle peut installer le module Vue.js sur votre machine. Dites oui (y)

Vous accedez ensuite à un prompt interactif vous demandant différentes informations. Vous devez renseigner le nom que vous voulez donner à votre projet (ce sera le nom de votre dossier racine).

Vue.js vous proposera ensuite d'ajouter différents modules complémentaires au projet. Vous pouvez indiquer 'No' pour tous les modules, nous ne les utiliserons pas pour le debut de ce cours.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Vue.js va ensuite automatiquement créer un projet avec le framework. Il vous proposera ensuite d'aller dans le dossier de votre projet et d'effectuer la commande npm install pour installer les dépendences necessaires à l'execution du projet.

INFO

📌 En 2020, la version 3 de Vue.js est sortie. Elle offre notamment une syntaxe plus fluide, de meilleures optimisations et certaines fonctionnalités supplémentaires, dont le support de l’API Composition. La version 2 de Vue.js reste toutefois encore massivement utilisé dans le milieu professionnel aujourd’hui (début 2023). Elle présente des différences mineures avec la façon dont nous utiliserons la version 3 ici. Vous trouverez facilement des guides vous permettant d’identifier les différences entre les deux versions.

Relier son projet à un repository Git ​

Si vous avez Git d’installé lors de la création de votre projet, Vue.js génère automatiquement un repository Git local pour vous. Pour le relier à un repository en ligne (un remote), sur GitHub ou GitLab par exemple, créez d’abord un repository vide en ligne. Rendez-vous ensuite dans le dossier racine de votre projet, et, dans votre terminal, exécutez la commande :

tsx
git remote add origin https://github.com/USERNAME/PROJECTNAME.git

Remplacez ici l’url par celle de votre repository (la même utilisée pour cloner un projet). Nous utilisons ici un lien HTTPS. Libre à vous de lier votre repository avec un lien SSH, si vous en avez la maitrise.

REMARQUE

👉 En cas d’erreur, vous pouvez supprimer le remote avec git remote remove origin, puis recommencer. Si vous rencontrez trop de difficulté avec la commande, vous pouvez toujours cloner localement votre repository vide en ligne et copier le contenu de votre projet Vue.js (à l’exception du dossier .git) dans votre repo local.

Conclusion ​

Votre projet est maintenant créé et correctement configuré. Vue.js va se charger de configurer lui-même notre projet Node.js, ainsi que notre configuration de Vite.

Vous pouvez maintenant vous rendre dans le prochain chapitre pour tester son exécution en lançant l’environnement de développement intégré à Vue.js. Nous étudierons ensuite l’architecture générée par défaut pour votre projet dans le chapitre 3.

Aller plus loin ​

Copyright © 2023-present Antoine Libert