1.- Instalación de Vue.js
npm install && npm run dev con esto ya tendremos los archivos y carpetas organizados correctamente para trabajar con vue.
npm audit fix para resolver algunos problemas de vulnerabilidad.
npm run dev ya podremos ejecutar la parte de Vue en nuestro proyecto, sin embargo, si queremos que el webpack este observando continuamente nuestros cambios y mostrándolos en la vista, entonces podríamos ejecutar npm run watch
***NOTA: en la linea 22 de la imagen, se indica el nombre del componente y el archivo en el que se encuentra.
Dentro de la carpeta component tendremos el archivo ExampleComponen.vue, el cual podremos utilizar en primera instancia para observar el funcionamiento de Vue.
2.- Utilizando nuestro primer componente Vue
Creamos un nuevo elemento en nuestra plantilla de productos, con el id «app», recordando que sobre ese elementro mostraremos por el momento, nuestros componentes de Vue.js.
plantilla.blade.php
ExampleComponent.vue
Finalmente al ejecutar nuestro proyecto, podremos observar el siguiente resultado.
De momento solo estamos mostrando un componente estático, en adelante veremos como aprovechar las ventajas de Vue.js, para mejorar nuestro CRUD en Laravel.
