Qué es Vue Cli y cómo podemos usarlo

March 02, 2022

Tags: Tecnologías
vue
Unsplash

 

Cuando se trata de desarrollar de manera rápida una aplicación con Vue.js, los desarrolladores expertos en este framework suelen recurrir a Vue Cli, un sistema completo para rápido desarrollo. 

 

Vue cli te provee de: 

 

  • Andamiaje de proyecto interactivo a través de @vue/cli.
  • Una dependencia de tiempo de ejecución (@vue/cli-service) que es:
  1.  Actualizable;
  2.  Construido sobre webpack, con valores predeterminados sensibles;
  3.  Configurable a través del archivo de configuración del proyecto;
  4.  Extensible a través de complementos
  • Una rica colección de complementos oficiales que integran las mejores herramientas en el ecosistema frontend.
  • Una interfaz gráfica de usuario completa para crear y administrar proyectos Vue.js.

 

En la página web oficial, nos describen a Vue Cli de esta manera “Vue CLI pretende ser la línea de base de herramientas estándar para el ecosistema de Vue. Garantiza que las diversas herramientas de compilación funcionen sin problemas junto con valores predeterminados sensibles para que pueda concentrarse en escribir su aplicación en lugar de pasar días discutiendo con las configuraciones. Al mismo tiempo, aún ofrece la flexibilidad de modificar la configuración de cada herramienta sin necesidad de expulsarla”.

 

Componentes de Vue Cli

 

Vue Cli tiene varias partes y te presentamos cada una y para qué funcionan:

 

Cli

 

La Cli consiste en un paquete npm y que proporciona el comando vue en su terminal. Este paquete se destaca por dar la capacidad de montar de manera rápida un proyecto a través de vue créate. Puede administrar los proyectos mediante una interfaz gráfica a través de vue ui.

 

Cli Service

 

El servicio CLI (@vue/cli-service) es una dependencia de desarrollo. Es un paquete npm instalado localmente en cada proyecto creado por @vue/cli.

 

En su página web explican que el servicio CLI se basa en webpack y webpack-dev-server. Además, que contiene:

 

  • El servicio central que carga otros complementos de CLI;
  • Una configuración interna de paquete web que está optimizada para la mayoría de las aplicaciones;
  • El binario vue-cli-service dentro del proyecto, que viene con los comandos básicos de servicio, compilación e inspección.

 

Cli Plugins

 

Los plugins o complementos de Cli no son más que paquetes de npm que pueden brindar características especiales a los proyectos que realices de Vue Cli, como la transpilación de Babel/TypeScript, igual que la integración de ESLint, pruebas unitarias y demás.

 

Detectar un complemento Vue Cli es bastante sencillo porque sus nombres comienzan con @vue/cli-plugin- (este para complementos integrados) o vue-cli-plugin-, este último para complementos comunitarios. 

 

Cuando ejecuta el binario vue-cli-service dentro de su proyecto, automáticamente resuelve y carga todos los complementos de CLI enumerados en el paquete.json de su proyecto.

 

Los complementos pueden incluirse como parte del proceso de creación de su proyecto o agregarse al proyecto más adelante. También se pueden agrupar en preajustes reutilizables. 

 

Te recomendamos en video