Aumente el flujo de trabajo de Vue.js con Vue CLI 3

Difícilmente podemos imaginar el desarrollo web moderno sin la ayuda de las herramientas de interfaz de línea de comandos (CLI). Facilitan enormemente y aceleran el flujo de trabajo de desarrollo al reducir la cantidad de tareas repetitivas y tediosas. Configurar un proyecto manualmente, con todas las funciones de alineación, construcción, prueba, preprocesamiento, optimización y seguimiento de dependencias no suena como un trabajo divertido, ¿verdad?

Es por eso que todos los marcos de desarrollo del lado del cliente modernos (como Angular, React, etc.) ofrecen su propia versión de herramientas CLI, y Vue.js no es una excepción. Pero con su última tercera versión, Vue CLI va un paso por delante de los demás. Ahora no solo es muy potente y flexible, sino que también viene con una GUI completa. Sí, has oído bien. Vue CLI 3 ofrece una interfaz gráfica de usuario completa lista para usar.

Comenzar nuevos proyectos Vue.js ahora es más fácil que nunca con la nueva CLI de Vue y su GUI de interfaz de usuario de Vue. Este tutorial le mostrará cómo utilizar Vue CLI y cómo Vue UI puede acelerar aún más su flujo de trabajo. ¡Empecemos!

¿Qué es Vue CLI?

Vue CLI es un conjunto de herramientas para la creación rápida de prototipos, la fácil aplicación de andamios y la gestión eficiente de proyectos. Se compone de tres cinturones de herramientas principales:

• CLI es un paquete npm instalado globalmente, que proporciona una funcionalidad central a través del comando vue. Nos permite crear fácilmente un nuevo proyecto (vue create), o simplemente crear prototipos rápidamente de ideas crudas (vue service). Si queremos un control más concreto y visual sobre nuestros proyectos, podemos abrir la versión GUI de la CLI ejecutando el comando vue ui.
• CLI Service es una dependencia de desarrollo (un archivo binario vue-cli-service), instalado localmente en cada proyecto creado con la CLI. Nos permite desarrollar nuestro proyecto (vue-cli-service serve), empaquetarlo para la producción (vue-cli-service build), y también inspeccionar la configuración interna del proyecto del paquete web (vue-cli-service inspect).
• Los complementos de CLI son paquetes npm que proporcionan funciones adicionales a nuestros proyectos. Sus nombres comienzan con @ vue / cli-plugin- (para plugins incorporados) o vue-cli-plugin- (para plugins de comunidad). Podemos agregarlos en cualquier momento del proceso de desarrollo a través del comando vue add.

En las siguientes secciones, exploraremos todas las tuercas y tornillos de las herramientas y utilidades anteriores, pero primero, veamos las características reales que hacen que Vue CLI sea tan potente y flexible.

Vue CLI es un sistema con todas las funciones para mejorar nuestro flujo de trabajo de desarrollo de Vue.js

Vue CLI acelera y facilita el desarrollo del proyecto Vue.js gracias a su gran colección de características. Veamos cuáles son esas características:

• Arquitectura basada en complementos. Vue CLI está totalmente construido alrededor de complementos, lo que lo hace muy flexible y extensible. Podemos elegir cuáles de los complementos incorporados agregar durante el proceso de creación del proyecto. Pero no estamos limitados solo a estos, podemos agregar cualquier cantidad de complementos en cualquier momento después de la creación del proyecto.
• Vue CLI es completamente configurable, extensible y actualizable.
• Un conjunto de complementos oficiales preinstalados, que integra herramientas de primera clase del ecosistema de aplicaciones (Babel, ESLint, TypeScript, PWA, Jest, Mocha, Cypress y Nightwatch).
• Un preajuste predeterminado único, que podemos modificar según nuestras necesidades durante la creación del proyecto o después.
• No hay necesidad de expulsar. En contraste con las herramientas React y Angular CLI, podemos inspeccionar y modificar de forma segura la configuración del paquete web de nuestro proyecto en cualquier momento después de la creación sin la necesidad de expulsar la aplicación y cambiar a la configuración manual.
• Soporte multipágina.
• Prototipado instantáneo sin ninguna configuración.
• Los diferentes objetivos de compilación nos permiten producir diferentes versiones de nuestro proyecto: podemos usar una misma base de código y compilarla como una aplicación, una biblioteca o componentes web.
• Característica del modo moderno. Esto construirá nuestra aplicación para navegadores modernos, pero con respaldo automático para los más antiguos. Genial, ¿eh?
• Una GUI completa para crear, actualizar y administrar proyectos complejos con facilidad.
• API UI Plugin. La interfaz de usuario de Vue expone una API de complemento que podemos usar para agregar funcionalidad personalizada a la versión GUI de la CLI.
• Muchos complementos útiles de la comunidad.

Primeros pasos con Vue CLI

Después de aprender sobre la magia de Vue CLI, es hora de verla en la práctica. Primero, debemos instalar Vue CLI 3. Requiere Node.js 8.9+ (se recomienda 8.11.0+), por lo que necesitamos asegurarnos de que lo tengamos en nuestras máquinas. Luego simplemente abrimos nuestra terminal o indicador de comando, y ejecutamos:

1

npm install -g @vue/cli

Una vez finalizada la instalación, podemos comenzar a usar el comando vue. Para comprobar si todo funciona correctamente, ejecutamos vue --version. Esto debería mostrar la versión de Vue CLI instalada. Ahora, exploremos lo que realmente podemos hacer con Vue CLI.

Prototipado instantáneo

Aunque Vue CLI está diseñado principalmente para trabajar con proyectos complejos, nos permite probar nuestras ideas en bruto de manera rápida y sin esfuerzo. Su función de creación de prototipos instantáneos se puede activar al instalar el complemento global del Servicio de CLI de Vue:

1

npm install -g @vue/cli-service-global

De ahora en adelante, podemos usar el comando vue serve cuando queramos. Vamos a intentarlo. Creamos un archivo App.vue con el siguiente contenido:

1

<template>

2

  <h1>Hello, Vue!</h1>

3

</template>

Luego, en el mismo directorio, ejecutamos:

1

vue serve

Esto iniciará el servidor de desarrollo Vue CLI y ejecutará la aplicación en http: // localhost: 8080 /. Cuando abramos el navegador en esta dirección, deberíamos ver un buen Hello, Vue! título.

Creando un Nuevo Proyecto

La sección anterior fue solo un calentamiento. Ahora hagamos algo más complejo.

El comando vue create usa un proceso interactivo para seleccionar las opciones para un nuevo proyecto. Vamos a ejecutarlo y recorrer sus opciones.

1

vue create vuecli-project

Crear un nuevo proyecto con Vue CLI

En la primera ventana, estamos invitados a elegir un preset. Solo hay un ajuste preestablecido disponible fuera de la caja, llamado predeterminado. Elegiremos la segunda opción, que es seleccionar manualmente las funciones que necesitamos para el proyecto, y presionar Enter para continuar.

En la siguiente ventana, usamos las teclas de flecha para navegar hacia arriba y hacia abajo en la lista de características y la barra espaciadora para seleccionar lo que queremos. Aquí, junto con el ya seleccionado Babel y Linter / Formatter, también verifiqué Router y Vuex. Una vez que haya seleccionado las funciones necesarias, presione Entrar para continuar.

En la siguiente ventana, se nos pregunta si usar el modo de historial para el enrutador. Acabo de pulsar Intro para aceptar el valor predeterminado de Sí.

En la siguiente ventana, debemos elegir cómo queremos configurar el Linter. Seleccioné ESLint + Prettier.

En la siguiente ventana, elegimos cuándo se utiliza la Linter para inspeccionar el proyecto. Elegí Lint al guardar, que se aplica cada vez que se guarda un archivo.

En la siguiente ventana, debemos decidir cómo queremos configurar nuestro proyecto. Elija si desea usar archivos de configuración separados para cada una de las funciones, o para incluir todos los ajustes de configuración en el archivo package.json. Prefiero un solo archivo, y he seleccionado la opción En package.json.

En la última ventana, tenemos la capacidad de guardar toda la configuración de creación de proyectos como un ajuste preestablecido fácil de usar para proyectos futuros. Guardé la mía como spa-simple. Los ajustes preestablecidos se guardan en la carpeta de usuario dentro del archivo .vuerc.

Cuando completemos el proceso de creación, el proyecto se creará y configurará, y los paquetes necesarios se descargarán e instalarán.

Explorando la Estructura del Proyecto

En esta sección, exploraremos lo que Vue CLI ha creado para nosotros.

En la carpeta del proyecto que se muestra arriba, tenemos los siguientes archivos y carpetas:

• La carpeta node_modules contiene los paquetes que requieren la aplicación y las herramientas de desarrollo.
• La carpeta pública contiene activos de proyecto estáticos, que no se incluirán en el proceso de agrupación.
• La carpeta src contiene la aplicación Vue.js con todos los recursos.
• .gitignore contiene una lista de archivos y carpetas que están excluidos del control de versiones de Git.
• babel.config.js contiene los ajustes de configuración para el compilador de Babel.
• package.json contiene una lista de los paquetes necesarios para el desarrollo de Vue.js, así como los comandos utilizados para las herramientas de desarrollo.
• package-lock.json contiene una lista completa de los paquetes, requeridos por el proyecto y sus dependencias.
• README.md contiene información general sobre el proyecto.

La nueva carpeta src

Ahora echemos un vistazo más de cerca a la carpeta src:

En la carpeta src que se muestra arriba, tenemos los siguientes archivos y carpetas:

• La carpeta de activos se utiliza para los recursos estáticos requeridos por la aplicación y que se incluirán en el proceso de agrupación.
• La carpeta de componentes se utiliza para los componentes de la aplicación.
• La carpeta de vistas se utiliza para los componentes que se mostrarán mediante la función de enrutamiento de URL.
• App.vue es el componente raíz.
• main.js es el archivo JavaScript que crea el objeto de instancia de Vue.
• router.js se utiliza para configurar el enrutador Vue.
• store.js se utiliza para configurar el almacén de datos creado con Vuex.

Cambiando la configuración del proyecto

La configuración predeterminada del proyecto contiene configuraciones razonables, pero si las necesitamos, podemos cambiarlas agregando un archivo vue.config.js en la carpeta del proyecto, o agregando una sección vue al archivo package.json. Probemos el primero: creamos un archivo vue.config.js y colocamos la siguiente opción:

1

module.exports = {

2

  runtimeCompiler: true

3

}

Esto permitirá que los componentes definan sus plantillas como cadenas, en lugar de utilizar elementos de plantilla. Para explorar el conjunto completo de opciones de configuración que puede usar, visite la página de configuración de CLI de Vue.

Desarrollando el Proyecto

Como vimos anteriormente, el servicio Vue CLI incluye tres scripts predeterminados: serve, build e inspect. El primero se utiliza para el proceso de desarrollo. Ejecutamos nuestro proyecto con el comando npm run serve:

Cuando abrimos nuestra aplicación en el navegador, deberíamos ver la siguiente página:

Esta es la página Home.vue, que utiliza el componente HelloWorld.vue.

El comando serve inicia un servidor de desarrollo, basado en webpack-dev-server, con una función de reemplazo de módulo activo (HMR). Esto significa que cuando hacemos cambios en nuestros componentes y los guardamos, se reflejarán de inmediato y la página se actualizará en el navegador.

Agregar nueva funcionalidad al proyecto con los complementos de Vue CLI

En algún momento del desarrollo de nuestra aplicación, es posible que tengamos que agregar alguna funcionalidad adicional al proyecto, y para eso necesitamos instalar los complementos de Vue CLI. Un complemento de Vue CLI puede modificar la configuración del paquete web e inyectar nuevos comandos a vue-cli-service. Para instalar un complemento, usamos el comando vue add.

Supongamos que queremos utilizar componentes Bootstrap para nuestro proyecto. Afortunadamente, hay un plugin bootstrap-vue, que puede proporcionarlos para nosotros. Para instalarlo, ejecutamos:

1

vue add bootstrap-vue

Después de la instalación del complemento, en la carpeta src, encontraremos una nueva carpeta de complementos donde se colocará el nuevo complemento.

Ahora, para probar la funcionalidad del complemento, modifiquemos el archivo About.vue:

1

<template>

2

  <div class="about">

3

    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">

4

        <p>For more information visit website</p>

5

      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>

6

    </b-jumbotron>

7

  </div>

8

</template>

Y cuando señalamos la página Acerca de en el navegador, deberíamos ver la página actualizada y con el estilo de Bootstrap:

Construyendo el Proyecto para la Producción

Cuando la aplicación esté lista para implementarse, debe crear un conjunto de paquetes que contengan solo el código y el contenido de la aplicación, junto con los módulos de los que dependen, para que estos archivos puedan implementarse en un servidor HTTP de producción.

Construyendo la aplicación

Para construir nuestra aplicación, corremos:

1

npm run build --modern

El argumento --modern crea dos versiones de la aplicación. Uno de ellos está dirigido a los navegadores modernos que admiten las últimas funciones de JavaScript, y el otro es un respaldo para los navegadores más antiguos que necesitan bibliotecas adicionales para manejar esas características. ¡Lo bueno es que después de implementar la aplicación, la selección de la versión que se utilizará es completamente automática!

Nota: Cuando ejecutamos el comando build , Vue CLI nos permite especificar una opción --target, que nos permite usar nuestra base de código para diferentes casos de uso. El objetivo de compilación predeterminado se establece para construir una aplicación. Tenemos dos opciones más para elegir: construir nuestro código como una biblioteca o como componentes web. Compruebe la página de objetivos de construcción para más detalles.

Explorando la carpeta dist

Cuando el proceso de compilación se completa, se crea una carpeta dist en la raíz del proyecto. Vamos a explorar sus contenidos:

El archivo index.html será el punto de entrada para la aplicación. Contiene elementos de link y script que cargarán todos los archivos CSS y JavaScript necesarios de las carpetas css y js.

Así que ahora, estamos listos para implementar nuestra aplicación en un servidor de producción. Hay un montón de opciones para elegir. Puede obtener información sobre muchos de ellos visitando la página de Implementación.

Vamos a GUI-fy nuestro proyecto con Vue UI

Vue CLI 3 es muy potente, pero esto tiene un precio. Hay demasiadas opciones, comandos y opciones para configurar y recordar. Esto hace que sea más complejo y difícil de trabajar. Para devolver las cosas a un estado fácil y feliz, Guillaume Chau creó la interfaz de usuario de Vue, lo que simplifica significativamente la experiencia de desarrollo y la hace más accesible. Al principio puede sonar un poco extraño combinar una herramienta CLI con una interfaz gráfica, pero como verá más adelante, esta simbiosis excepcional es bastante poderosa y eficiente.

Recrear nuestro proyecto con Vue UI

En esta sección, analizaremos la creación del mismo proyecto que creamos anteriormente, pero esta vez usaremos Vue UI.

La interfaz de usuario de Vue se hace con su propio marco de interfaz de usuario y no se necesita ningún electrón para ejecutarlo en el navegador. Simplemente ejecute el comando vue ui, sin importar en qué directorio:

1

vue ui

Vue Project Manager se inicia con la pestaña Proyectos seleccionada. Aún no hay proyectos existentes. Para tener algunos proyectos enumerados aquí, necesitamos crearlos a través de la interfaz de usuario o importar proyectos creados con la CLI. Veamos cómo podemos crear un nuevo proyecto.

Cambiamos a la pestaña Crear, navegamos al directorio deseado para nuestra aplicación y hacemos clic en el botón Crear un nuevo proyecto aquí.

En la siguiente pantalla, le damos un nombre a la carpeta del proyecto y elegimos el administrador de paquetes que preferimos.

En la siguiente pantalla, se nos permite elegir un ajuste preestablecido para el proyecto. Puede ser el predeterminado, el manual, un control remoto o un ajuste preestablecido personalizado que hemos creado anteriormente. spa-simple es un ejemplo de un preajuste personalizado. Aquí, elegimos Manual.

En la siguiente pantalla, seleccionamos los complementos que queremos instalar.

Finalmente, establecemos los ajustes de configuración para los complementos que hemos elegido instalar. Cuando estemos listos, pulsamos el botón Crear Proyecto.

Ahora se creará el proyecto y se nos redirigirá al panel del proyecto.

Uso del panel de proyectos de Vue UI

En la sección de complementos se enumeran todos los complementos instalados. Para instalar un nuevo complemento, presionamos el botón Agregar complemento.

Aquí, podemos buscar el complemento que necesitamos y cuando lo encontramos, pulsamos el botón Instalar. En nuestro caso, buscamos e instalamos el complemento bootstrap-vue.

Cuando se instala el complemento, en la pestaña Configuración, podemos configurar las opciones proporcionadas.

En la pestaña Archivos modificados, podemos inspeccionar qué archivos están afectados y cómo. Aquí, no quiero cometer ningún cambio, así que presioné el botón Saltar.

En la sección Dependencias hemos enumerado todas las dependencias principales y de desarrollo. Para agregar dependencia, hacemos clic en el botón Instalar dependencia.

En la ventana modal, podemos buscar dependencias principales o de desarrollo e instalarlas.

En la sección Configuración, podemos personalizar las configuraciones proporcionadas para los complementos que hemos agregado. Aquí, tenemos configuraciones para Vue CLI y para el complemento ESLint.

La sección de tareas nos brinda una manera conveniente de usar todos los comandos disponibles proporcionados por Vue CLI y de otros complementos. En esta pantalla, se selecciona la tarea serve. Podemos cambiar sus parámetros presionando el botón Parámetros.

En la ventana modal, seleccionamos los parámetros con los que queremos ejecutar la tarea.

Cuando ejecutamos la tarea serve, el panel de control se actualizará con información útil.

Cuando cambiamos a la pestaña Salida, obtenemos los registros para el proceso de la tarea.

Cuando cambiamos a la pestaña Analizador, obtenemos un gráfico agradable que resume la información de todo el proyecto.

La tarea build es casi similar a la tarea serve, con la excepción de que la primera produce un paquete de producción que se puede usar para implementar la aplicación.

Podemos establecer parámetros para la tarea build de la misma manera que con la tarea serve.

El campo Salida de la tarea inspect nos proporciona información sobre la configuración del paquete web resuelto.

Y eso es. Hemos recreado con éxito nuestro proyecto con la interfaz de usuario de Vue. Pero como vimos, los procesos de creación y configuración son más fáciles y mucho más agradables cuando usamos una GUI.

Conclusión

En este tutorial aprendimos que Vue CLI es un sistema completo para el desarrollo web moderno. Nos permite operar con todo el ecosistema Vue y herramientas de terceros de forma rápida y sencilla. Por supuesto, no estamos obligados a usar Vue CLI para nuestros proyectos Vue.js. Esta es completamente nuestra elección. Pero cuando buscamos velocidad y calidad, Vue CLI está aquí para ayudar a crear, administrar y desplegar nuestros proyectos de una manera profesional.