← Retour

Comment créer un projet Vue3 (VueJS) ?

~5 min

Le web est assez complexe aujourd'hui, on sait pas trop par où commencer. Alors voici un petit guide pour commencer un projet VueJS.

Mise à jour Novembre 2022 avec Vite ⚡️

Le web est assez complexe aujourd’hui, on sait pas trop par où commencer. Alors voici un petit guide pour bien démarrer un projet VueJS.

Projet simple

Pour s’amuser et tester VueJS le mieux est de simplement l’installer via CDN. On intègre le framework via une balise script et le tour est joué (oui oui ca peut être aussi simple que cela)

<!DOCTYPE html>

<html lang="en">
    <head>
		  ...
    </head>

    <body>
        <main id="app">
        </main>
        
        <script src="https://unpkg.com/vue@next"></script>
		<script>
          const MyAppVue = {
          	...
          };

         Vue.createApp(MyAppVue).mount('#app');

        </script>
      </body>

</html>

On peut retrouver ces informations sur la documentation de VueJS juste ici.

Une fois ce starter prêt vous pouvez commencer à développer avec VueJS simplement en suivant la super introduction dans la documentation pour vous familiariser avec les bases.

Le VueDevTools

Pensez à installer cette extension Chrome et Firefox qui va vous sauvez des heures de débugage à l’aveugle.

Attention à bien prendre la version qui fonctionne avec Vue3 ici en version bêta au moment où je rédige l’article.

Fenêtre d'illustration de VueDevToolVous allez pouvoir voir le contenu des vos variables, du store Vuex, des événements, etc.

Pour un projet plus ambitieux

A partir du moment où on va commencer à ajouter des dépendances et vouloir utiliser toutes les fonctionnalités du framework (comme les single file component - SFC), ce qui est quand même un peu le but. Alors on va devoir se frotter à un monde beaucoup plus complexe mais qui va vous faciliter la vite durant le projet : Le bundling.

A partir de là vous devez être familier de la ligne de commande avec Node.JS sur votre système d’exploitation.

Vous devez avoir Node.JS installé. On vous a déjà fait un petit tutoriel, c’est par ici.

Vite ⚡️

Aujourd’hui pour installer Vue, le plus simple et rapide est de lancer cette commande dans votre terminal favoris avec Node.js en version LTS.

npm init vue@latest

Ensuite s’en viendra plusieurs questions :

✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

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

Pinia correspond à Vuex, c’est le nouveau standard pour la gestion des données avec Vue.

A la fin du processus, votre projet devrait être créé, maintenant il faut l’initialiser et installer les dépendances :

> cd <dossier-de-votre-projet>
> npm install
> npm run dev

Une URL devrait s’afficher dans le terminal du genre

Local:   http://127.0.0.1:5173/

En y accédant, si tout va bien, vous devriez voir cet écran Hop :) Vous avez installé et lancé un projet VueJS moderne avec Vite.

Vue-CLI (Obsolète)

L’outil le plus simple d’utilisation et qui vous occulte la plupart des difficulté c’est Vue-CLI (pour Command Line Interface). Le Logo VueJSVue-CLI Vue-CLI utilise WebPack pour faire son travail, il va vous mettre en place un environnement de développement personnalisé avec une structure de fichier propre pour votre projet VueJS.

$ yarn global add @vue/cli
# OU
$ npm install -g @vue/cli

Dans un terminal avec NodeJS accessible et à jour sur la LTS (Long Term Support)

Sur Mac M1, j’ai eu des soucis en utilisant Node 17, pensez à utiliser plutôt Node 16 qui fonctionne à merveille. Pour switch de version pensez à NVM

Une fois la commande exécutée avec succès, vous allez pouvoir utiliser vue directement depuis votre terminal. Et la cela va devenir très très simple ;)

$ vue create mon-projet-vue

En lançant cette commande l’assistant va vous poser une série de questions pour personnaliser votre projet au mieux. Illustration du choix des pré-réglagesOn peut utiliser des pré-réglages ou créer une configuration personnalisée Cette partie est la plus intéressante, vous allez pouvoir choisir un peu comment vous voulez commencer votre projet.

  • Le choix de pré-processeurs CSS si vous voulez travailler avec **SASS / SCSS, Less ou Stylus. **
  • Un linter, super pratique pour vous indiquer rapidement si il ya une erreur dans votre code depuis la ligne de commande
  • Des dépendances importantes comme Vuex et Vue Router.
  • Si vous voulez travailler avec TypeScript, etc.

Illustration du choix des options dans le terminalOn peut choisir des options comme inclure VueX et le Routeur, mais aussi des Pre-processeurs CSS

Choisissez votre version de Vue

Vue3 est suffisamment stable et intéressant pour pouvoir l’utiliser sur un nouveau projet, je recommanderai pas d’upgrader tout de suite vos projets Vue2 sauf si vous avez beaucoup de temps et de ressources avec vous ;). Illustration du choix de la version de VueAllons-y avec Vue 3 Continuez à répondre aux questions, si vous ne savez pas quoi choisir, prenez les éléments par défaut qui sont très bien.

Et hop ! Vous avez un beau projet Vue3 tout propre. Image d'illustration d'un projet généré par Vue-CLILa structure d’un projet Vue-CLI par défaut A partir de la, Vue-CLI vous à même rédiger le readme.md qui explique comment lancer le projet et le build pour la production.

Il vous suffit maintenant de faire yarn serve puis de cliquer sur le lien affiché dans la console et voilààà. Gif avec une femme disant "Noice"

Les autres méthodes

C’est le web, et le web tout le monde fait bien comme il veut. Ce qui rend tout ça cool mais aussi très complexe pour les débutants ! Il existe d’autres outils pour générer des projets Vue :

  • Vite qui est bien cool et très rapide, le jour et la nuit, probablement le futur.
  • SnowPack
  • Rollup
  • WebPack from scratch si vous êtes assez courageux (et un peu fou)
  • NPM from scratch