Menu

Vue CLI

vue - April 15, 2019 por Carlos Rojas | Edita este Post.
Vue CLI3.2.1

Crear archivos dentro de nuestro proyecto (Boilerplate) resulta siempre una tarea engorrosa y poco estandarizada, es por esto que el equipo de Vue ha desarrollado una herramienta poderosa que nos va a ayudar bastante en nuestro proceso de desarrollo es el Vue CLI.

El Vue CLI es una herramienta no obligatoria que te ayuda a estructurar facilmente tu proyecto entre sus caracteristicas podemos encontrar:

Rica en características.

Sin mucha configuración soporta Babel, TypeScript, ESLint, PostCSS, PWA, Pruebas Unitarias y Pruebas e2e.

Extensible.

El sistema de plugin permite a la comunidad construir y compartir soluciones reusables para necesidades comunes.

No necesita expulsar.

El Vue CLI es completamente configurable sin la necesidad de expulsar para configuraciones avanzadas. Esto permite a tu proyecto estar actualizado a largo plazo.

Interfaz Grafica de Usuario.

Crea, Desarrolla y Administra tus proyectos a través del acompañamiento de una interfaz grafica de usuario.

Prototipado Instantaneo.

Instantaneamente prototipa nuevas ideas con un simple archivo de Vue.

Listo para el futuro.

Despliega codigo ES2015 nativo para navegadores modernos, o construye tus componentes en Vue como componentes Web Nativos.

¿ Como instalar ?

Para instalar es relativamente simple solo debes tener NodeJS instalado y ejecutar.

$npm install -g @vue/cli
$vue --version

Deberia salir algo como 3.6.1.

$ vue create

El comando create lo utilizamos para crear un proyecto nuevo con nuestra configuración listo para usar con VueJs. Para esto ejecutamos:

$vue create myawesomeapp

luego veremos algo como:

Vue CLI v3.6.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

normalmente dejo todo en default y obtengo algo como:

setting up Git hooks
can't find .git directory, skipping Git hooks installation
added 1194 packages from 660 contributors in 53.291s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 36 packages from 27 contributors, updated 2 packages and moved 9 packages in 14.655s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project myawesomeapp.
👉  Get started with the following commands:

 $ cd myawesomeapp
 $ npm run serve

Con esto ya deberias ver tu app en el navegador.

$ vue ui

Puedes administrar y crear proyectos con una interfaz grafica ejecutando el comando ui.

Puedes hacer muchas configuraciones con esta herramienta grafica. Me encanta.

$ vue add

El comando add lo utilizamos para agregar plugins a nuestro proyecto generado con el CLI. Para esto podemos tomar como ejemplo:

Para agregar un linter.

$vue add @vue/eslint

Para agregar un linter y configurar las reglas de airbnb.

$vue add @vue/eslint --config airbnb --lintOn save

Este comando tiene casos especiales como es:

$vue add router
$vue add vuex

Los cuales no son plugins pero igualmente lo puedes agregar a tu proyecto.

$ vue invoke

El comando invoke se utiliza para ejecutar los generadores de los plugins en caso de que vengan en el proyecto. Puedes pensarlo similar a un npm install.

Un ejemplo de su uso puede ser:

$vue invoke eslint --config airbnb --lintOn save

donde activamos cierta configuracion de @vue/eslint

$ vue inspect

El comando inspect se utiliza para trabajar con el Webpack que viene configurado automagicamente en nuestro proyecto.

$vue inspect --rules
$vue inspect --plugins

donde observamos que reglas tenemos y que webpack plugins estamos usando.

$ vue serve

El comando serve nos permite ejecutar un .js o .vue en desarrollo sin configurar nada.

$vue serve -o

Nos levantara un proyecto y abrira una ventana en el navegador.

$ vue build

El comando build nos permite preparar un .js o .vue para producción sin configurar nada.

Por ejemplo:

$vue build

$ vue init

El comando init nos permite generar proyectos desde templates remotos.

Por ejemplo:

$vue init webpack my-project

$ vue config

El comando config nos permite ver y modificar la configuracion de nuestro proyecto en vue.

$vue config

$ vue upgrade

El comando upgrade te permite subir de versiones los plugins nuestro proyecto en vue.

$vue upgrade

$ vue info

El comando info te permite ver las variables relevantes de tu entorno y proyecto en vue.

$vue info

Si este contenido te parece útil y me quieres ayudar a hacer mas, considera apoyarme en Patreon.

Bueno eso es todo por ahora. Espero sea de utilidad :)

¡Compártelo!