"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Proyecto VueJS 2 con Vue CLI

Es posible que hayas escuchado hablar de VueJS, un framework ligero y potente que está a enfocado a crear componentes reactivos y que presume de reunir lo mejor de ReactJs Y Angular (Ahí es nada).

Yo por mi parte me he lanzado a usarlo porque programando aplicaciones en Laravel 5 es casi una obligación aprenderlo, pues lo trae integrado y en su documentación oficial asi como en los distintos foros te animan a que lo uses.

 

Tras un casi un año utilizandolo estoy encantado y creo firmemente que el futuro de la web pasa por filosofías como esta, componentes reutilizables, reactividad, implantacion de los ultimos estandares de ecmascript, preprocesadores…

Pero este post no es para hablar de VueJs sino de Vue CLI es una herramienta para hacer scaffolding (generar estructura básica) de un proyecto basado en Vue, si ya estás metido en esto de node y conoces Yeoman, piensa en que es un Yeoman con unos cuantos generadores ya incorporados que tienen en comun que los proyectos que levantan estan básados en este framework.

Al lío, como nos la bajamos y empezamos usar esto del Vue CLI, bueno en primer lugar y atendiendo a los requisitos que marcan en su documentación, necesitas mínimo para empezar:

  • Node.js (al menos la versión 4.x, y preferiblemente la 6.x)
  • Npm version 3 (Si bajas la ultima versión de node ya te viene incorporada)
  • Git

Nada del otro mundo, si estás leyendote este artículo me juego a que ya tienes todo esto instalado, si no es asi este es el momento de hacerlo y tal vez antes de seguir leyendo prefieras documentarte un poco sobre todo de que va nodejs, porque te va a hacer falta si no sabes usarlo.

Continuamos, ahora que tenemos todo esto, vamos a usar precisamente el instalador de paquetes npm para descargar de forma global el Vue CLI.

npm install -g vue-cli

Listo, ya lo tenemos instalado, facil verdad?

Ahora vamos explicar un poco como creamos un proyecto, en primer lugar deciamos antes que si lo comparabamos con Yeoman tenia una serie de generadores ya integrados, en la documentacion les llama plantillas y serian estas 7 de aqui:

  • webpack – A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  • webpack-simple – A simple Webpack + vue-loader setup for quick prototyping.
  • browserify – A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  • browserify-simple – A simple Browserify + vueify setup for quick prototyping.
  • pwa – PWA template for vue-cli based on the webpack template
  • simple – The simplest possible Vue setup in a single HTML file

Tenemos plantillas basadas en webpack y browserify que son los grandes empaquetadores de codigo (son el siguiente paso a los clásicos automatizadores de tareas grunt y gulp), tambien tenemos un plantilla simple y una pwa (plantilla web progresiva).

Yo soy mas de webpack porque porque tuve que trabajar con él y despues de que me enseñaran de lo que era capaz no lo cambio por nada ahora mismo, por eso voy a crear un template con webpack, en este caso voy a usar el webpack-simple para no complicarme la vida.

Como lo hago, pues simplemente escribo en la consola:

vue init webpack-simple vueTest

Y listo, una vez creado me dice esto:

Es decir me manda ejecutar 3 comandos:

cd vueTest para entrar en directorio donde creo el proyecto
npm install para bajarme todas las dependencias
npm run dev para ejecutar un comando del archivo package.json que basicamente lo que hace es levantar el webpack en modo desarrollo con el webpack-dev-server de manera que además ya crea el servidor y abre una ventana nueva en el navegador apuntando la puerto definido.

Si miramos en la estructura de carpetas vemos que el index esta vacío y basicamente todo lo que vemos en pantalla es un componente de Vue, en un post futuro analizaré los ficheros que crea y os explico para que sirven.
 
 
The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)