Comparte en Facebook Twitter Google+

Banner Vue CLI UI

Una de las características más interesantes de la versión 3 de Vue CLI es Vue UI, una interfaz gráfica que permite crear, actualizar y administrar cada aspecto de nuestros proyectos. En este tutorial exploraremos esta nueva característica y aprenderemos a generar nuestros proyectos directamente desde dicha interfaz.

Actualizar Vue CLI

Lo primero que debemos hacer para tener acceso a la nueva interfaz gráfica es actualizar nuestra versión de Vue CLI:

npm install -g @vue/cli

Hecho esto podemos comprobar la nueva versión pasando la opción -V al comando vue desde la terminal y comprobando que muestra la versión 3 instalada:

vue -V

Iniciando Vue UI

Para iniciar Vue CLI UI simplemente ejecuta el siguiente comando en la terminal:

vue ui

Este comando iniciará Vue UI en el directorio actual y abrirá una nueva ventana del navegador:

Vue UI inicio

Si no tienes proyectos en el directorio donde ejecutaste el comando verás el mensaje “No existing projects”.

Aprende más sobre Vue.js con nuestro libro La Elegancia de Vue 2 disponible en Leanpub

Leer más

Creando nuestro primer proyecto

Como puedes ver en la imagen anterior tenemos tres opciones:

  • Projects para ver los proyectos que tenemos en el directorio.
  • Create para crear un nuevo proyecto.
  • Import para importar un proyecto.

A continuación nos centraremos en la opción Create para crear un nuevo proyecto. Cuando hacemos clic en dicha opción se nos presenta la siguiente pantalla:

Vue UI create screen

Aquí también podemos seleccionar en qué directorio queremos crear el proyecto, en caso de ser en un directorio diferente al que nos encontramos actualmente. Una vez que has seleccionado el directorio haz clic en el botón verde que dice “Create a new project here” para ir al paso a paso para crear un nuevo proyecto:

Vue UI step by step

El primer paso es seleccionar un nombre para el directorio de nuestro proyecto, en la imagen superior puedes ver que el nombre por defecto es my-app. Luego de este paso seleccionamos el manejador de paquetes para nuestro proyecto, el cual puede ser npm o yarn. Los siguientes dos pasos nos pregunta si queremos sobrescribir el directorio escogido en caso de que exista y, por último, si queremos inicializar un repositorio de Git en el proyecto y opcionalmente puedes indicar cuál será el mensaje del commit inicial. Para continuar presionamos “Next”.

Vue UI presets screen

El siguiente paso es seleccionar el preset que queremos para nuestro proyecto. El preset por defecto (Default preset) trae todo lo necesario para comenzar un proyecto, así que lo seleccionamos y presionamos “Create Project”. Al realizar este paso Vue UI se encargará de instalar nuestro proyecto:

Vue UI installation screen

Una vez completado este paso seremos redirigidos a nuestro proyecto y podremos ver una lista de los plugins instalados:

Vue UI plugins

Desde aquí también podemos actualizar nuestros plugins y añadir nuevos.

Instalando plugins

Para instalar un nuevo plugin en nuestro proyecto simplemente debemos hacer clic en “Add plugin” y seremos redirigidos a la siguiente pantalla:

Vue UI add plugin

Los plugins que aparecen con @vue son plugins oficiales de Vue o soportados oficialmente por Vue.

Desde aquí podemos buscar y seleccionar el plugin que queramos instalar. Una vez seleccionado el plugin hacemos clic en instalar:

Vue UI plugin install selection

Hecho esto nuestro plugin se instalará. Dependiendo del tipo de plugin puede que se nos pida agregar algún tipo de configuración adicional, en el caso del plugin instalado en este ejemplo (Jest) no se nos ha pedido agregar ninguna:

Vue UI plugin installed

Hacemos clic en “Finish installation” para continuar y ser redirigidos al siguiente paso, en el que se nos pedirá confirmar los archivos modificados:

commit changes with Vue UI

Luego de verificar que todo esté bien hacemos clic en “Commit changes” y seremos redirigidos a la lista de plugins instalados.

Al finalizar este paso ya tendrás todo lo necesario para comenzar a trabajar en tu nuevo proyecto. Espero que te haya gustado este tutorial y te resulte útil. Puedes encontrar el enlace a la documentación oficial de Vue CLI en el material relacionado.

Material relacionado

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 9 USD al mes: ver planes.