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.
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
Creo que los e-commerce no manejan los precios por el front para evitar esto, mas bien a la hora de hacer la transacción se consulta mediante el id del articulo cual es su valor en la db, pero esto es del lado del servidor.
interesante, que metodología de desarrollo tiene, es MVC
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.»
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.
hola buenas noche amigo tu has utilizado laravel 5.4 y vue webpack, trabajando los dos en carpeta separadas,.
Gracias Espero tu pronta repuesta…!
Saludos, no con Laravel pero si con Node.js.