Utiliser vue-cli

Après avoir lu le cours sur les bases de Vue.JS 3, j'ai cru comprendre que je devais apprendre à utiliser Vue-cli.
Oui, cet outil est très pratique puisqu'il te permet de :

• Gérer de manière interactive la configuration d'un projet vue


• Gérer les dépendances de notre projet


• Gérer la compilation et l'optimisation de nos fichiers vue


• Gérer les plugins liés à notre projet


• [...]

Vue-cli rassemble donc les outils utiles et nécessaires pour développer une SPA avec Vue. En effet, quand on commence avec Vue, il n'est pas nécessaire d'utiliser cet outil, le CDN suffit. Mais dès qu'on veut aller plus loin, en utilisant les Single File Components par exemple (tu apprendras ça dans les prochain cours !), on a besoin d'utiliser vue-cli (ou un autre outil de build comme webpack, vue vite...). D'ailleurs petite information, vue-cli utilise en fond Webpack. Si jamais tu n'as jamais entendu ce mot ou que tu connais mal Webpack, je te laisse regarder rapidement ce tutoriel si tu en as envie : https://www.training-dev.fr/Cours/Utiliser-et-configurer-Webpack-simplement

Ok je comprends l'intérêt. Je suis prêt à démarrer.

Installer Vue-cli

Comme toujours avant d'utiliser un outil ou une librairie, il faut...

l'installer ?
Tout à fait. Et pour l'installer, on va utiliser un gestionnaire de dépendances propre à Javascript. On a le choix entre npm et yarn. Pour ma part j'utilise npm :


J'exécute cette commande où ? Et avec quoi ?
Alors, sur des PC UNIX-Like (Mac ou Linux), tu vas mettre cette ligne dans le terminal comme tu dois en avoir l'habitude. Sur Windows, ce sera dans Windows Powershell ou git bash. Quelque que soit l'outil que tu utilises, je vais l'appeler "console" ou "terminal" dans la suite du tuto ;).
Une fois sur l'un de ces outils, tu exécutes la commande comme telle. Pas besoin d'être dans un dossier particulier ! En effet, tu as peut être remarqué le flag "-g" dans la commande de npm install. Cela permet d'installer vue-cli de manière globale, on y aura donc accès partout, pas que dans le dossier courant ;)

Ok c'est noté !
Quand l'installation aura terminé tu pourras vérifier que tout a fonctionné en tapant :


À l'heure où j'écris le tutoriel, le résultat est "@vue/cli 4.5.9". Si tu as quelque chose de similaire, c'est que tout a fonctionné ! (et normalement, tout a fonctionné sans difficulté)

Ok c'est bon pour moi, on peut passer à la suite !

Créer un projet avec vue-cli

Le mieux pour gérer ses fichiers .vue est de créer un projet avec vue-cli. Ainsi, chacun des fichiers présents dans le projet (le dossier) seront compilés et traités par vue-cli. Il y a aussi une façon de compiler uniquement un fichier en particulier sans créer de projet. Si cela t'intéresse : https://cli.vuejs.org/guide/prototyping.html

Nous nous allons créer un projet. Pour cela, rendez-vous dans la console, dans le dossier où tu veux créer ton projet et tape la commande suivante en remplaçant "nomduprojet" par le nom que tu veux donner au projet :


Mais quand j'ai déjà un projet avec du code qui gère la partie back (PHP, NodeJS...), je fais cette commande où ?
Tu dois te placer à la racine de ton projet et taper la commande. Cela créera donc les dossiers liés à vue-cli à la racine ;)

Ok ! Après avoir tapé la commande j'ai une interface qui apparait après.
Oui, celle-ci :


Cette interface nous permet de sélectionner un "preset". C'est à dire un ensemble d'outils qui seront utiles lors de la compilation de vue. Nous avons 3 choix. Les 2 premiers nous proposent des "presets" déjà prêts pour des projets avec Vue.JS 2 ou Vue.JS 3. C'est parfait pour développer rapidement notamment en environnement local. Si l'on veut avoir plus de choix et plus de contrôle pour des projets qui seront amenés à être mis en production (en ligne), on peut choisir manuellement tout ce qu'on veut ajouter comme outils utilisés par vue-cli ;).
C'est ce que nous allons choisir. On va se déplacer avec les flèches du clavier pour sélectionner "Manually select features".


Oula, que dois-je sélectionner là ?
C'est ce que nous allons voir. En fait, on va pouvoir cocher/décocher les options qui nous intéressent. Voyons à quoi elles servent :

• Choose Vue Version : nous permet de sélectionner par la suite la version de Vue.JS avec laquelle on va développer


• Babel : nous permet d'installer ou non Babel, le transpileur le plus connu. Besoin d'infos sur les transpileurs ? N'hésite pas à lire le tuto sur Webpack que j'ai donné plus haut !


• Typescript : nous permet d'indiquer à vue-cli si nous allons utiliser Typescript, un langage web qui étend le JS natif


• PWA Support : les PWA sont (pour moi) le futur du web. Ce sont des applications web qui sont adaptés pour mobile en proposant des interfaces très pratiques, un accès hors ligne etc... Vue.JS est un framework permettant de faire des PWA. Avec cette option on peut dire à vue-cli si l'on compte développer ce genre d'application


• Router : Vue.JS propose Vue router qui nous permet de faire des Single Page Application. On indique ici à vue-cli si l'on veut utiliser Vue router.


• Vuex : Vue.JS propose Vuex qui permet de gérer les "états". Utile quand on veut maintenir une grosse application. Pareillement, on peut indiquer à vue-cli si l'on compte l'utiliser pour qu'il installe les librairies correspondantes


• CSS Pre-processors : nous permet de sélectionner par la suite si on veut utiliser un préprocesseur CSS comme SASS


• Linter : nous permet d'indiquer à vue-cli si l'on souhaite utiliser un linter (outil qui permet de vérifier son code js en temps réel)


• Unit testing : nous permet d'indiquer à vue si l'on souhaite utiliser des outils de test unitaire (comme jasmine)


• E2E testing : pareil, mais avec les tests de "bout en bout"

Le choix de ces options dépend donc de chaque projet. Je te propose ici de sélectionner ce que tu pourrais être amené à utiliser quand tu débutes. Pour sélectionner il suffit d'appuyer sur la touche "espace" de ton clavier. Voici mon choix :

• Choose Vue version


• Babel


• CSS Pre-processors


• Linter

Ok c'est sélectionné ! Maintenant je fais quoi ?
Appuie sur la touche "retour à la ligne" de ton clavier pour enregistrer. Il va alors t'être demandé quelle version de Vue tu vas utiliser, le pre-processeur CSS souhaité, le linter souhaité. Pour ma part j'utilise Vue.JS 3, SASS avec dart-sass, et ESLint (un linter) avec la configuration par défaut.

C'est quoi prettier et Airbnb config ?
Prettier est une "extension" de ESlint qui te donne des conseils sur la qualité de ton code. Si le code est propre, que tu inventes bien etc.
Airbnb config est la configuration de ESlint utilisée par Airbnb. En effet, Airbnb propose un guide pour coder en JS suivi par de nombreux développeurs autour du monde et propose donc certaines configurations de ses outils, comme ESLint. Plus d'infos sur le "style guide" de Airbnb : https://github.com/airbnb/javascript

Ok super ! Après on me demande si je veux "lint on save" ou "lint on commit". Je choisis quoi ?
"Lint on save" activera le linter à chaque fois que tu enregistreras ton code tandis que la seconde option l'activera uniquement lorsque tu feras des commits. C'est à toi de voir ce que tu préfères. Moi je préfère quand je sauvegarde mon fichier, je choisis donc "lint on save".

Ensuite on te demandera où tu veux sauvegarder la config de chacun des outils que tu as sélectionnés. Soit directement dans package.json, soit dans des fichiers séparés. Je préfère dans des fichiers séparé, ça permet de mieux voir la configuration de chaque outil qu'on a.

Et pour terminer on te demande si tu veux sauvegarder quelque part cette configuration de vue-cli ! À toi de voir ce que tu préfères ;)
Et c'est fini ! Vue-cli installe maintenant toutes les dépendances en fonction de tes choix.

Commencer à coder

Maintenant que nous avons téléchargé et configuré vue-cli nous allons regarder le contenu de notre projet, de nos dossiers.

Entendu, je t'écoute.
En premier lieu, je te laisse remarquer le fait qu'il y a les fichier package.json, package-lock, gitignore, README et le dossier node_modules comme dans un projet classique utilisant npm et git.

Oui je connais ces fichiers.
Parfait. Nous avons à la racine du projet des fichiers un peu plus intéressants :

• .browserslistrc : c'est un fichier qui permet de lister les navigateurs pour lesquels on veut une forte compatibilité. Cela permet à Babel et à des outils de compilation/minification/prefixage CSS de savoir quelles règles appliquer. Plus d'infos : https://github.com/browserslist/browserslist
  


• .eslintrc.js : fichier de configuration de ESLint


• babel.config.js : fichier de configuration de Babel

Tous ces fichiers ont générés par vue-cli suite à la configuration choisie.

Noté ! Et qu'en est-il des dossiers public et src ?
Le dossier public contient la partie que les internautes verront en ligne. Il contient les fichiers HTML, les images, le style, le JS...

Mais attends, là je ne vois qu'un fichier HTML et un favicon, pas de JS, de style...
En effet. C'est normal ! N'oublie pas que les fichiers JS/CSS etc. seront compilés, minimisé, traités par vue-cli (ou des outils dédiés intégrés par vue-cli). Ce n'est qu'à ce moment qu'ils seront directement intégrés dans le dossier public ! En attendant, ils sont dans le dossier "src". C'est là qu'on va notamment mettre nos fichiers JS et nos fichiers .vue.

Ah je comprends ! Dans le dossier "src" il y a d'ailleurs App.vue et main.js et un dossier "components" qui contient des un fichier .vue. Pourquoi ?
Le fichier main.js est le "point d'entrée" de ton application Vue.JS. Il s'agit du fichier JS qui lance l'instance de ton application Vue. Son code devrait te parler :


On a un Root Component (App) qu'on importe du fichier App.vue et on l'initialise grâce à createApp ;). Si cette syntaxe, un peu différente de ce qu'on a vu dans le cours "Les bases de Vue.JS", te perturbe, sache que le cours "Tour des composants avec Vue.JS" explique en détail tout ce code !

Ensuite, on a le fichier App.vue qui contient donc notre premier composant. Là aussi, le cours sur les composants devrait éclaircir tes pensées si jamais tu ne comprends pas tout !

Ok c'est noté !
Bon, maintenant qu'on a vu la structure de l'application, il serait bien de savoir comment en profiter et comment voir le résultat de nos codes dans le navigateur !
Pour ce, on va utiliser des scripts mis à disposition par vue-cli et renseignés dans package.json :


Quelle est la différence entre chacun d'entre eux ?
Le script "serve" permet d'avoir le résultat de ton code dans le navigateur mis à jour après chaque enregistrement de ton code ! C'est super pratique. C'est ce qu'on appelle une fonctionné de "hot reloading". C'est le script qu'on utilisera lorsqu'on est en train de développer.
Le script "build" est le script qu'on utilisera quand on voudra mettre en production notre code. Le résultat sera minifié et donc plus rapide à charger et plus adapté à un environnement de production.
"lint" quant à lui sert simplement à utiliser le linter. À savoir que "serve" lance déjà le linter selon ce que tu as choisi dans ta configuration (à chaque enregistrement ou à chaque commit).

Pour tester notre code du coup et voir le résultat :


Bingo ! Tu as maintenant une interface qui s'affiche et t'indique comment visionner le résultat.


Il te suffit alors d'ouvrir ce lien dans ton navigateur et laisser la magie opérer ;). Quand tu modifieras ton code dans le dossier src, le dossier public sera modifié en conséquence et le résultat dans le navigateur également sans avoir besoin de le recharger !

Ok, super pratique !
Oui, et il y a encore plus pratique si tu n'aimes pas les lignes de commande : le GUI offert par vue-cli.

Le GUI

Tu peux suivre tous tes projets, modifier leur configuration ou créer un projet depuis une interface graphique appelée "GUI". Pour ce, il te suffit de taper dans ton terminal "vue ui" :


Après avoir tapé cette commande, tu seras automatiquement redirigé vers un lien dans ton navigateur qui te permettra de gérer tes projets ;)

Super ! Je vais essayer ça !

Pour finir

Voilà, on a vu les bases de vue-cli. Cet outil est très pratique pour gérer ses projets vue. En réalité, il y a possibilité de le configurer de manière plus poussée en agissant directement sur un fichier de configuration nommé vue.config.js qui permettra notamment de passer des données de configuration directement à webpack qui tourne en fond. On peut aussi évidemment agir sur les "outils" utilisés par Vue comme des linters, des transpilateurs... Ce qu'il faut comprendre c'est qu'au final, vue-cli est un outil très simple qui se base sur beaucoup d'autres outils. C'est la configuration de ces outils qui fait varier la façon dont notre projet est géré.

Tu es maintenant prêt à utiliser les Single File Components et à créer des SPA ou PWA !

Youpi ! Merci pour ce tutoriel. Je vais maintenant pouvoir poursuivre ma lecture du cours sur les composants !