Créez une application web avec Vue.js

Dans le développement frontend, il fut un temps où tout était fait à la main. Qu'il s'agisse d'intégrer la bonne feuille de style à certaines pages en fonction de son contenu, ou s'assurer de minimiser la taille du fichier JavaScript pour optimiser le temps de chargement d'une page. Petit à petit,  nous avons adapté nos outils pour automatiser un certain nombre de process.

C'est là qu'interviennent les outils de build (c'est-à-dire gulp, webpack, etc.) et l'interface en ligne de commande.

De nos jours, pour la plupart des frameworks connus, une interface en ligne de commande (CLI) est obligatoire pour construire des applications en entreprise. Cela est notamment dû à la complexité qui entoure ces outils de build. Les outils CLI existent fondamentalement pour fournir aux développeurs une base standard facilitant le démarrage de projet. Ainsi, les développeurs consacrent davantage de temps à la construction de l'application plutôt qu'à sa configuration.

Installez Vue CLI

Pour commencer à utiliser la CLI de Vue, la version de Node 8.9 ou supérieure est nécessaire (v8.11.0 ou + est recommandée). L'installation sur votre machine se fait en mettant cette ligne dans votre terminal (ou Windows PowerShell si vous êtes sur Windows) :

npm install -g @vue/cli
# OU (selon si vous avez l’habitude d’utiliser npm ou yarn)
yarn global add @vue/cli

Une fois l'installation terminée, vous devriez être en mesure d'exécuter :

vue --version
# 4.x

Lorsque votre terminal affiche une version 3.x ou 4.x, cela signifie que Vue CLI a été installé avec succès !

Créez un nouveau projet

Créer un nouveau projet avec Vue CLI est une opération simple. Lançons-nous et créons un projet ensemble :

vue create my-first-vue-cli-app

Vous devriez être invité à choisir un preset ( vous pouvez le traduire par "préréglage") :

Un preset correspond aux options préconfigurées installées automatiquement avec chaque application. Comme votre installation de Vue CLI est nouvelle, vous verrez qu'elle ne dispose que d'un preset par défaut (Babel, ESLint), ainsi que d'une option permettant de sélectionner les fonctionnalités manuellement. Pour parcourir l'ensemble des configurations de Vue CLI, utilisez la touche "flèche vers le bas" pour déplacer la sélection, et appuyez sur Entrée pour choisir notre sélection.

Une fois que vous avez choisi « Manually select features » (sélectionner les fonctionnalités manuellement), l'écran d'accueil suivant devrait apparaître :

Les options présentées ici dépassent certes le cadre de ce cours, mais vous pouvez voir qu'il existe de nombreuses options pour configurer vos projets. Passons maintenant au préprocesseur CSS.

1. Il vous sera utile si vous souhaitez activer le « mode historique » pour le routeur. Tapez  n  et appuyez sur la touche Retour.

2. Pour notre préprocesseur CSS, nous choisirons   Sass/SCSS (with node-sass)

3. Pour notre linter, nous choisirons  ESLint with error prevention only

4. Pour la configuration de lint, choisissez Lint on save

5. Pour l'emplacement souhaité de la configuration, choisissez In dedicated config files

Vous disposez également d'une option permettant de sauvegarder cette configuration pour de futures applications, mais comme il s'agit d'une configuration temporaire, nous allons saisir  N  pour que notre configuration ne soit pas sauvegardée comme preset.

Votre terminal va maintenant commencer à installer tous les paquets nécessaires pour la CLI. Les réglages de terminal diffèrent légèrement d'un utilisateur à l'autre, mais une fois que vous voyez quelque chose comme :

[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 220.83s.
⚓  Running completion hooks...
 
📄  Generating README.md...
 
🎉  Successfully created project my-first-vue-cli-app.
👉  Get started with the following commands:
 
$ cd my-first-vue-cli-app
$ npm run serve

... cela veut dire qu'il va être temps de découvrir ce que vous avez installé 🤩!

Découvrez l’architecture d’une application Vue CLI

Lorsque vous ouvrez votre nouveau projet, my-first-vue-cli-app, dans votre éditeur de code, vous devriez voir quelque chose semblable à ce qui suit.

Le principal contenu à connaître est le suivant :

• node_modules - contient l'ensemble des dépendances qui permettent à votre application de faire tout ce qu'elle fait. Vous n'aurez que rarement (sinon jamais) besoin d'aller dans ce dossier, car il n'est généralement pas attaché au repository, mais directement géré par npm ;

• public - ce répertoire contient le favicon.ico et le fichier  index.html  de base qui serviront à générer le reste de votre application ;

• src - ce répertoire est celui dans lequel vous passerez 99 % de votre temps, car la quasi-totalité de votre code y sera située ;

• .gitignore - ce fichier contient une liste de fichiers et/ou de répertoires qui ne seront pas attachés à un repository. Citons ici deux exemples courants avec le répertoire  /dist, qui est généré de manière automatique à chaque build (et ne nécessite donc aucun suivi), et le répertoire  node_modules, qui est automatiquement recréé à chaque lancement de la commande  npm install  ou yarn install;

• package.json - il s'agit du fichier de configuration de base de votre projet. Il comprend des métadonnées comme le nom et la version de votre projet, mais il contient également des informations essentielles comme les scripts pouvant être exécutés (comme serve, build, lint) et les dépendances requises pour votre projet :

  • serve - il s'agit du script qui permet de lancer une environnement de développement en local,

  • build - ce script permet de créer la version finale qui sera livrée à un client ou à l'utilisateur.

Continuons et ouvrons ensuite le répertoire src :

• Assets - il s'agit du répertoire dans lequel vous placerez les images et les autres ressources obligatoires auxquelles vous devrez peut-être faire référence dans votre application (c'est-à-dire les vidéos, les documents PDF, etc.).

• Components - ce répertoire contiendra les composants de notre application. Si vous ne savez pas encore ce que sont les composants, ne vous inquiétez pas. Je traiterai ce sujet dans le prochain chapitre !

• main.js - c'est ici que sont définies les options de configuration plus high-level de Vue. Ce fichier peut sembler légèrement différent de ce à quoi nous sommes habitués, mais l'instanciation d'une nouvelle application Vue devrait ressembler à ce que nous avons fait précédemment.

En regardant cette liste, vous avez peut-être remarqué que j'ai omis un fichier important : App.vue. Nous sommes en effet sur le point de nous plonger dans l'un des aspects les plus intéressants de Vue : les composants monofichiers.

Avant de passer au chapitre suivant, retournons dans le terminal et testons :

npm run serve

Cette commande lance un environnement de développement local (généralement à l'adresse http://localhost:8080) qui vous permet de voir et d'interagir avec les changements dans votre application au fur et à mesure que vous codez. C'est l'un des meilleurs outils créés pour les développeurs web, et la plupart ne peuvent pas imaginer la vie sans lui !

Une fois que vous êtes dans votre environnement de développement local, je vous recommande vivement de consulter Vue DevTools, qui est une véritable boîte à outils pour les développeurs utilisant Vue. Elle nous aide à créer des super applications Vue 🚀 !

Entraînez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier  cafe-with-a-view. Pour commencer, consultez la branche  P2C1-Begin.

Instructions

1. Créer un nouveau projet avec Vue CLI qui est appelé cli-version avec la configuration suivante :

   - Préprocesseur CSS (Sass/SCSS) avec node-sass.

   - ESLint avec prévention des erreurs uniquement.

   - Lint on Save.

   - Dans des fichiers de configuration dédiés.

   - Ne pas enregistrer comme un preset.

En résumé

Dans ce chapitre, vous avez appris :

•     comment installer Vue CLI ;

•     comment créer une nouvelle application Vue avec Vue CLI ;

•     comment configurer une application Vue avec Vue CLI ;

•     comment sont structurées les applications générées par Vue CLI.

Dans le chapitre suivant, nous allons en apprendre davantage sur le type de fichier particulier  *.vue, qui deviendra votre meilleur ami : les composants monofichiers. Alors, c'est parti !