Aujourd'hui, le BlogDuWebdesign vous propose un tutoriel très complet pour installer Vue-ui sur votre machine Windows.
Il y a quelques jours je vous parlais de Vue UI, un moyen de manager vos projets Vue depuis une interface graphique plutôt que depuis votre console. En fin d'article je vous promettais un tutoriel pour l'installer sur Windows, le voilà !
Notez que vous allez devoir passer par une interface console pour installer Vue UI (un comble, vu que son rôle est de ne pas avoir à utiliser la console !) mais je vous promets qu'à la fin de cet article, pour pourrez gérer vos projets Vus sans avoir à vous approcher d'une interface ligne de commande de trop près.
Attention : cet article n'a pas pour but de vous apprendre à utiliser une console ni aucun des lociciels présentés ici, simplement à vous donner les commandes nécessaires pour atteindre notre but : installer Vue cli3. Je vous encourage évidemment à vous renseigner plus en avant sur les commandes présentés dans cet article si vous voulez en savoir plus.
Cet article n'est pas non plus un tutoriel pour démarrer un projet Vue, ou un tutoriel pour bien utiliser Vue. Si c'est ce que vous cherchez, je vous conseille la lecture de l'article Guide complet pour développer et intégrer avec Vue js #1 : L'installation et les bases de Vue
Installation de Cmder
Cmder est à la fois une console et un moyen simple d'installer git. Attention, vous ne pouvez pas utiliser babun comme terminal, ni aucun autre utilisant cygwin.
Si vous avez déjà une version de Git pour Windows et que vous êtes à l'aise avec la console de Windows (powershell, pour ne pas la nommer) vous pouvez passer cette étape.
Si vous n'êtes pas sure de ce qu'est une console, Cygwin ou de ce qu'est git, vous n'avez pas le droit de passer cette étape.
L'installation de Cmder est enfantine. Téléchargez la version complète comprenant git pour Windows, décompressez l'archive obtenue, et voilà c'est fini ! Pour lancer Cmder, cliquez simplement sur le fichier du même nom dans le dossier décompressé, vous devez obtenir un affichage comme suit.
Pour être sûr que vous avez installé le paquet contenant git, tapez dans la console git –version. Vous devez obtenir un retour du style git version 2.19.0.windows.1 (les chiffres peuvent varier, c'est sans importance). Si oui, félicitation vous pouvez passer à l'étape suivante.
Sinon, je vous propose de vérifier que vous avez bien pris la version "full", qui doit faire un peu plus de 100Mo. Dans le cas contraire, re-téléchargez le et recommencez ces étapes.
Installation de NVM
Pour simplifier autant que possible, nous allons avoir besoin de Node.js, un logiciel qui va permettre à votre ordinateur de comprendre et exécuter des fichiers Javascript. Vous en aurez besoin car de nombreux programmes utiles dans la vie d'un intégrateur web sont écrits en Javascript, comme par exemple dans notre cas vue cli3. Avant tout, essayons de regarder si vous avez déjà Node.js dans une version suffisante sur votre machine.
Ré-ouvrez Cmder, et tapez node –version. Si la console vous donne en échange un chiffre dans un affichage de ce style v10.13.0 ET que ce chiffre est SUPPERIEUR à 8.11, félicitations, vous avez déjà node.js, vous pouvez sauter deux étapes et aller directement à Vue cli3.
Vous n'avez pas Node.js, il va donc falloir l'installer. Le seul problème est que les différentes versions de nodejs ne sont pas forcément toutes compatibles avec tous les programmes, il est donc parfois nécessaire d'avoir plusieurs versions sous la main, et d'être capable d'utiliser la bonne pour chaque projet. Pour ça, nous allons utiliser un programme supplémentaire qui nous permettra de gérer et installer ces versions de nodejs : NVM for Windows.
Tapper dans cygwin nvm -v. Si vous avez de nombreuses lignes de texte s'affichant, avec une première ligne ressemblant à Running version 1.1.7, vous pouvez passer à l'étape suivante. Sinon, Allons-y pour l'installation de NVM !
Allez sur la page de téléchargements de NVM for windows, et téléchargez l'archive nvm-setup.zip. Décompressez là, double-cliquer sur l'installateur à l'intérieur (c'est le seul fichier, vous ne pouvez pas vous tromper) et passez les étapes d'installation.
Une fois fini, fermez et ré-ouvrez cmder, et tapez nvm -v. Vous devez avoir de nombreuses lignes de textes qui s'affichent, avec la première ressemblant à Running version 1.1.7. Si oui, c'est tout bon et vous pouvez passer à l'étape suivante.
Installer la bonne version de Node.js
Nous allons maintenant pouvoir installer Node.js ! Vue-cli3 demandant une version supérieure à 8.11, nous allons installer la version LTS (long term support, donc qui sera supproté longtemps et qui est très stable) la plus récente.
Pour la connaitre, tapez dans cmder la commande nvm list available. Vous devez obtenir un résultat comme suit :
Pour trouver la version qui nous intéresse, il faut regarder dans la deuxième colonne, celle judicieusement nommée LTS. À l'heure à laquelle j'écris cet article, la version la plus récente est la 10.13.0. Pour l'installer, il faut donc tapper dans la console nvm install 10.13.0
Une fois l'installation terminée, il va falloir dire à nvm que nous voulons utiliser cette version en tapant nvm use 10.13.0.
Pour vérifier que tout fonctionne, fermez cmder, ré-ouvrez le et tapez dans cmder node –version. La console doit vous dire v10.13.0 (ou un numéro différent si votre version était différente). Si oui, félicitations, vous pouvez passer à l'étape suivante !
Sinon, vérifiez bien que vous avez bien remplacé tous les 10.13.0 par le numéro de version que vous a donné la commande nvm liste available.
installer Vue cli3 et démarrer l'interface Vue UI
Enfin, nous sommes à l'étape intéressante, celle pour laquelle nous avons enduré toutes les étapes précédentes ! Dans cmder, entrez la commande suivante : npm install @vue/cli –global
Une fois l'installation terminée, il ne nous reste plus qu'à tester en entrant la commande vue ui. Normalement, Windows va nous demander si vue ui peut accéder à votre réseau (dites oui), puis votre navigateur doit s'ouvrir et afficher l'adresse http://localhost:8000.
Sinon, pas de panique et essayez d'aller à l'adresse http://localhost:8000, l'interface devrait apparaitre.
Bonus
Notre interface pour Vue se lance, nous pourrions nous arrêter là, mais je vous ai promis que vous pourriez gérer vue sans avoir à vous approcher d'une console une fois l'installation finie. Pour tenir ma promesse, j'ai modifié un programme de egoist, originellement fonctionnant que pour mac, pour lui donner un support Windows. Cliquez-donc sur ce lien pour le télécharger.
Téléchargez l'executable suivant et lancez le tout simplement. Une fenêtre va s'ouvrir avec votre interface dedans ! De cette manière, plus besoin de s'approcher de Cmder, mais je vous conseille tout de même de le garder sous la main, il vous servira peut-être de nouveau un jour ou l'autre.