Aujourd’hui le BlogDuWebdesign vous propose de découvrir une interface graphique permettant de créer, gérer et lancer des projets Vue sans passer par la console : Vue UI.
Qu’est-ce que Vue.js ?
Vue est un framework javascript front-end pour créer des sites et applications reactives.
C’est sans aucun doute mon framework front-end de coeur, j’ai donc écrit de nombreux articles à son sujet sur le BlogDuWebdesign, que je vous encourage à aller lire pour en savoir plus. Si vous ne savez pas par où commencer, Qu’est-ce que Vue.js est un bon premier pas.
Vue CLI 3, ceci est une révolution
Vue a toujours eu (toujours non, mais depuis longtemps disons) un outil cli permettant de démarrer simplement un projet. Sobrement intitulée vue-cli, elle permettait d’installer toutes les ressources de base et créer les configurations et dossiers nécessaire pour bien commencer son projet. Choisissez simplement ce que vous voulez supporter (genre sass, typescript, babel, …) et voilà, tout était pret !
Pour son passage à la version 3, l’outil a eu droit à une remise à plat très impressionnante. Pour commencer, au revoir le paquet vue-cli, et bonjour au nouveau paquet @vu/cli ainsi qu’à tout son écosystème de plugin et fonctionnalités ! Je prendrais certainement le temps à l’avenir de parler de certains d’entre eux, mais concentrons-nous aujourd’hui sur celui qui intéressera le plus tout les non-utilisateurs de cli parmi-vous : vue ui
Gérez tout vos projets vue à travers Vue UI
Vue UI est une interface graphique que vous pouvez lancer à partir du moment où vous avez vue cli3 d’installée, et qui permet de manager tout vos projets Vue installée sur votre machine, mais aussi en créer des nouveaux.
La création d’un nouveau projet se fait très simplement : appuyez sur « create projet », choisissez son nom, un des « pack de base » standard dans votre entreprise (ou créez-en un en sélectionnant vous-même des ressources et plugin) et en avant Guingamp !
Une fois votre projet installé, vous vous retrouverez face à un dashboard personnalisable. Les différents modules proposés sont assez pauvre pour l’instant, mais rien n’empêche d’immaginer un module permettant de gérer ses commits, les taches qui nous sont assignées sur github, etc.
Vous pourrez aussi installez de nouveaux plugins et paquets npm directement depuis l’interface, sans jamais vous approcher d’une CLI à moins de 100m.
Enfin, vous pourrez aussi lancer toutes les taches prévues par votre application (comme par exemple démarrer le serveur de développement) et avoir un joli retour graphique si cela est prévu par le développeur de la tache en question.
Installation et lancement sous linux et mac
Sur linux ou mac, le lancement de l’interface est extrèmement simple : installez nodejs si ce n’est pas encore fait, puis installez @vue/cli à travers votre gestionnaire de paquet (sudo npm install @vue/cli -g), puis entrez dans votre terminal la commande vue ui. Votre navigateur va s’ouvrir sur la page localhost:8000 présentant l’interface de vue ui !
Pour profiter au maximum de ce que peut vous proposer vue-ui, je vous conseille vraiment d’installer git si ce n’est pas encore fait, ainsi que yarn car l’installation des projets est un peu longue avec npm.
Et sous Windows ?
Il est possible que les instructions précédentes fonctionne sous Windows, mais je ne les ai pas testé. Dans tout les cas je prépare un article complet expliquant se lancer à l’intégration avec Vue.js sous Windows, attendez-vous donc à des nouvelles dans peu de temps !