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.
Installer 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 comme ceci :
text
1
npm install -g @vue/cli#
2
# OU
3
yarn global add @vue/cli
Une fois l'installation terminée, vous devriez être en mesure d'exécuter :
text
1
vue --version
2
# 3.8.3
Lorsque votre terminal affiche une version 3.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 :
text
1
vue create my-first-vue-cli-app
Vous devriez être invité à choisir un preset ( vous pouvez le traduire par "préréglage") :
Exemple de preset que vous verrez en utilisant la commande Vue create
Pour naviguer dans l'outil Vue CLI, vous devez utiliser :
les touches fléchées pour la direction ;
la touche Retour/Entrée pour choisir votre option ;
la barre d'espace pour sélectionner une option parmi les inputs de type "radio".
Découvrez l’architecture d’une application Vue CLI
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 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 !
