Primeros Pasos con Vue Cli 3

Hace unas semanas fue lanzada la nueva versión de Vue Cli 3, que cuentas con nuevas funciones para agilizar y optimizar el trabajo con Vue JS, potente Framework Javascript para el desarrollo de Vistas Front, vamos a explicarte como instalar Vue Cli 3, los comandos y funciones más destacados, entre otros detalles.

Si es la primera ves escuchas sobre Vue JS te recomendamos leer nuestro artículo Que es Vue JS, Historia y otros detalles para que estés familiarizado con este artículo.

Que es Vue Cli ?

Para los que no conocen sobre Vue Cli, pues es un entorno de comandos y funciones que permite el desarrollo ágil con Vue JS, estos comandos y funciones se integran a una Consola de Comandos como la que viene en Windows o Git Bash, con esto la consola de comandos tendrá soporte para las instrucciones de Vue Cli mientras desarrollas tu proyecto con Vue JS.

Vue Cli esta compuesto por varios paquetes y dependencias, como:

CLI

Es una paquete instalado de manera global que proporciona Vue a las consolas de comandos que están instaladas en el Sistema Operativo de un Computador o PC. CLI da la capacidad de organizar de manera rápida un proyecto por medio del comando vue create, también para levantar un servidor con vue serve, así mismo ayuda a gestionar los proyectos mediante una interfaz gráfica de usuario mediante el comando vue ui y otros comandos.

Servicio CLI

Este servicio es una dependencia para el desarrollo de proyectos con Vue JS, se despliega en cada proyecto que hayas creado con Vue Cli. El Servicio CLI está creado bajo Webpack y Webpack Dev Server que asi mismo cuenta con:

• Un servicio central que inicia otros complementos en CLI.
• Configuraciones internas del paquete web optimizado para todo los proyectos creados con Vue JS.
• El binario vue-cli-service con los comandos serve, build, inspect entre otros.

Complementos CLI (Plugins)

Son un conjunto de paquetes que brindan diferentes funciones para Vue Cli 3, entre estas funciones están las transpilación de Babel  / Typescript o la integración para cambiar el estilo del código con ESLint.

Los complementes se suelen usar durante el proceso de creación de un proyecto, se usan para añadir funcionalidades rápidamente evitando el desarrollo lento del proyecto, asimismo estos plugins o complementos pueden ser reutilizables en Vue Cli 3.

Instalación de Vue Cli 3

Para poder instalar la versión 3 de Vue Cli, debes de desinstalar las versiones anteriores que tengas instaladas en tu sistema operativo, para desinstalarlas puedes ejecutar el siguiente comando

Nota: Nosotros hasta la fecha usamos Node JS para el trabajo con Vue JS.

Asimismo Vue Cli requiere la versión de Node JS 8.9 o superior, la versión recomendable según la documentación oficial de Vue Cli es desde Node JS 8.11 o superior.

Teniendo todo correcto, ahora puedes instalar Vue Cli 3 ejecutando el siguiente comando

Una ves instalado, puedes verificar si tienes la versión 3 de Vue Cli instalado, ejecuta el siguiente comando

Con eso ya tienes instalado Vue Cli 3 listo para usarlo.

Crear un Proyecto

Con la versión de Vue Cli 3 puedes crear un proyecto de manera más intuitiva, para crear un nuevo proyecto ejecutando el siguiente comando, colocale un nombre a tu proyecto después del comando

El sistema te va pedir que escojas un tipo de ajuste por defecto que incluye Babel y Eslint o configurarlo manualmente

Cuando seleccionas la opción Manualmente o Manually select features te aparece las siguientes opciones

Si no sabes que opción elegir, cierra la consola, vuelve a crear el proyecto y selecciona la opción por default

El sistema de Vue Cli 3 crea un conjunto de directorios y archivos para el optimo funcionamiento del proyecto.

Instalación de Plugins para Vue Cli 3

Algo que nos parece genial es poder usar plugins y herramientas que agilizan el desarrollo con Cli 3, en muchas ocasiones puedes necesitar instalar un plugin, para esto puedes usar el comando vue add

Por ejemplo si deseas instalar el plugin EsLINT para dar estilos al código, puedes ejecutar lo siguiente

Los plugins son para Vue Cli 3 y darle la posibilidad de extender y realizar otras tareas, pero no reemplaza a NPM que se utiliza para instalar paquetes al proyecto creado con Vue JS.

Notas

• Los pasos mencionados en este artículo, pueden cambiar en futuras versiones de Vue Cli, esto no depende de nosotros si no de los desarrolladores que dan soporte a Vue Cli.
• En otro artículo expandiremos más el tema sobre Vue Cli 3, en donde hablaremos sobre Vue UI entre otros temas.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.