Comment créer un projet Vue3 (VueJS) ?

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

Comment créer un projet Vue3 (VueJS) ?

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 VueDevTool
Vous 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), 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.

Vue-CLI

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 VueJS
Vue-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églages
On 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 terminal
On 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 Vue
Allons-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-CLI
La 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

Commentaires

Connectez vous ou devenez un membre de Async pour rejoindre la conversation.
Entrez un mail ici pour recevoir un lien de connexion, super simple ⚡️