Nous contacter

  1. Accueil
  2. Blog
  3. Développement
  4. Vue UI, une incroyable interface graphique pour développer avec Vue

Vue UI, une incroyable interface graphique pour développer avec Vue

Le 13/11/2018

Dans Développement

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 réactives.

C’est sans aucun doute mon framework front-end de cœur, 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 prêt !

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 tous 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 tous vos projets Vue installés 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 !

Créer un projet vuecli étape 1
Créer un projet vuecli étape 2

Une fois votre projet installé, vous vous retrouverez face à un dashboard personnalisable. Les différents modules proposés sont assez pauvres pour l’instant, mais rien n’empêche d’imaginer un module permettant de gérer ses commits, les tâches qui nous sont assignées sur github, etc.

Vuecli tableau de bord

Vous pourrez aussi installer de nouveaux plugins et paquets npm directement depuis l’interface, sans jamais vous approcher d’une CLI à moins de 100m.

Vuecli : les plugins

Enfin, vous pourrez aussi lancer toutes les tâches 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 tâche en question.

Vuecli : configurer les tâches

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 comment se lancer à l’intégration avec Vue.js sous Windows, attendez-vous donc à des nouvelles dans peu de temps !