Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

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:

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

 

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

Salir de la versión móvil