programación

Construir un ambiente de desarrollo para Vue.js usando Webpack

Después de haber escrito sobre lo básico de Vue.js es momento de pasar al próximo nivel, Vue.js usando Webpack. La idea este “próximo nivel” es poder tener un ambiente relativamente completo para desarrollar nuestro front-end.

Vue ha desarrollado una herramienta increíblemente práctica para este propósito. La herramienta es conocida como vue-cli y contiene todo lo necesario para arrancar el ambiente de desarrollo. Lo bueno de utilizar esta herramienta es que provee una manera oficial y opinionada de empezar un proyecto. Además provee espacio para adaptarlo a nuestra necesidades y gustos.

Para comenzar a utilizar vue-cli debes tener: Node.js (>=4.x, 6.x siendo preferido) y Git. En cuanto a npm una recomendación es tener npm >= 3.x.

Instalamos de la siguiente manera:

$ npm install -g vue-cli

Actualmente los templates oficiales disponible son:

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • simple

Si deseas utilizar vue-cli para trabajar con tu propio template los puedes hacer fácilmente. La documentación oficial lo explica con lujo de detalle.

Para propósitos de este tutorial y porque es el template que más utilizo estaremos trabajando con webpack. Esta versión es bien completa e incluye todo lo que necesitamos: Webpack Dev Server, Babel setup, Hot Reloading, Unit Testing, etc.

Ya que hemos instalado vue-cli, vamos a utilizarlo para crear nuestro proyecto y de una vez procederemos a instalar las dependencias.

$ vue init webpack my-project

$ cd my-project

$ npm install

Ya con todo en su lugar vamos a inicial el proyecto.

$ npm run dev

Conclusión

Es hora de repasar que tenemos hasta el momento. Hemos creado un proyecto a través de la herramienta vue-cli. Esta herramienta utiliza Webpack para manejar todo el ambiente de desarrollo de Vue. Nada “fancy” por el momento pero si analizamos todo lo que tenemos con tan solo usar vue-cli, comprenderemos el gran ahorro en tiempo y stress que esta simple herramienta nos provee.

  • Italo Navarrete

    Hola, pregunta, y creo que será la primera de muchas :-|, con vue podemos modificar los datos desde la consola, como se puede evitar?, como por ejemplo traer el precio de un articulo y cargarlo en un array, eso sería peligroso que lo cambien desde la consola del navegador
    espero que se entienda la pregunta

  • José Luis Becerra Latorre

    interesante, que metodología de desarrollo tiene, es MVC

    • Jaime

      Traducido desde la documentación oficial del framework: “Vue es un framework progresivo para crear interfaces de usuario. Contrario a otros frameworks monolíticos, Vue es diseñado ser incrementalmente adoptable. La librería principal se centra únicamente en la capa de visualización y es muy fácil de aprender e integrar con otras librerías o proyectos existentes.”

    • http://www.jaimeolmo.com Jaime Olmo

      Traducido desde la documentación oficial del framework: “Vue es un framework progresivo para crear interfaces de usuario. Contrario a otros frameworks monolíticos, Vue es diseñado ser incrementalmente adoptable. La librería principal se centra únicamente en la capa de visualización y es muy fácil de aprender e integrar con otras librerías o proyectos existentes.”. En este sentido podemos decir que trabaja la V de MVC o la parte VM de MVVM.

  • Utha

    hola buenas noche amigo tu has utilizado laravel 5.4 y vue webpack, trabajando los dos en carpeta separadas,.

    Gracias Espero tu pronta repuesta…!

    • http://www.jaimeolmo.com Jaime Olmo

      Saludos, no con Laravel pero si con Node.js.