1. Instalación y conceptos básicos

Si has llegado hasta aquí, seguramente ya sabes qué es Vue Js y estas interesado en ello. Pero si aun tienes dudas y para no perder la información: Vue (pronunciado como “view”) es un framework de Javascript centrado esencialmente en la capa de Vista, fácil de entender y de integrar con otras bibliotecas y proyectos. Potente, ligero, escalable, divertido de programar, limpio, ordenado… (seguro que se me olvida algún adjetivo).

Para este curso vamos a trabajar con la versión 2.0 de Vue sobre un backend en Laravel 5.3, haremos uso de expresiones ES6, npm para instalar dependencias y Webpack sobre Laravel Elixir para compilar nuestro javascript. No es necesario seguir los pasos que aquí se describen para entender el curso pero sí recomendable, al menos, leer su documentación y entender mínimamente su uso. Para el mismo se recomienda tener al menos conocimientos básicos de Javascript.

Puesta en Marcha

Lo primero que vamos hacer, es tener una instalación limpia de Laravel como base para nuestro proyecto. Y como ya sabemos lo podemos realizar a través de:

Una vez creado nuestro proyecto, y configurado nuestro archivo .env y todo eso que ya sabes hacer (si no, date una vuelta por el blog) vamos a instalar las dependencias de Frontend que vienen pre-configuradas a partir de Laravel 5.3. Las mismas se encuentran en nuestro archivo package.json

Para instalarlas, debemos tener instalado NPM o en su defecto Yarn (gestores de dependencias de javascript) y ejecutar:

Cuando haya terminado su trabajo tendremos una nueva carpeta llamada node_modules y nuestro entorno listo para empezar a escribir código.

Nuestro trabajo se centrará en la ruta resources/assets/js y nuestro archivo principal app.js, que ya nos ha sido creado por la instalación de Laravel.

No esta demás recordar que en la carpeta assets es utilizada para almacenar todos los archivos crudos no compilados de nuestros recursos, como los archivos LESS, SASS, o de JavaScript.

El archivo app.js

Éste archivo que nos genera Laravel va a ser nuestro punto de partida a la hora de crear nuestra instancia de Vue y escalarla tanto como necesitemos.

Por defecto viene con un código de ejemplo el cual vamos a respetar porque básicamente es lo que tendríamos que hacer.

Primeramente, tener un require del archivo bootstrap.js que se encarga de importar las librerías. En nuestro caso nos interesan vue y vue-resource.

En la segunda linea Taylor Otwell ha declarado un componente de ejemplo, esto sera explicado en la siguiente lección donde crearemos uno propio, por ahora lo usaremos para saber que todo está bien instalado y configurado.

Y en la tercera linea, POR FIN, encontramos nuestra instancia de Vue, la cual recibe como único argumento (y esto va a ser una tónica con este framework) un Objeto. En él declararemos tantas propiedades como necesitemos. Por ahora, solo usaremos una:

Con esto le estamos diciendo a Vue que su ámbito de actuación va a ser un elemento html con el id=”app”.

Ya solo nos queda compilar nuestro js. Esto es necesario porque vamos a estar requiriendo e importando archivos (esto lo veremos más adelante) así como a, eventualmente, usar sintaxis ES6 que hay que transpilar a ES5 para que sea entendido por la mayoría de navegadores.

Para ello basta con ir a la consola y ejecutar

Después de ejecutarlo, y que gulp haya realizado todas las tareas programadas dentro del archivo gulpfile.js del cual se hablara más adelante, se habrá creado un archivo en la ruta public/js/app.js

La vista

Para hacer las cosas fáciles y centrarnos en lo que importa, vamos a usar la ruta que trae Laravel por defecto, la cual apunta a la vista welcome al visitar la raíz de nuestro proyecto. Así que la editaremos y dejaremos sólo este código

Hemos creado un div con el id=”app” donde vamos a poder llamar a cualquier componente que hayamos registrado globalmente en Vue. Recordemos que nuestra instancia principal está atado al el: ‘#app

Para hacer uso de dicho componente, será tan falacia como crear una etiqueta html usando el nombre con el que haya sido declarado.

Si nos dirigimos en el navegador a la url de nuestro proyecto, podremos ver lo siguiente:

En la próxima lección entraremos de lleno en las características del framework. Y esperamos que este curso de vue js sea de tu agrado. Recuerda que si tienes alguna duda o recomendación puedes hacerla dentro de los comentarios o unirte al slack de Laraveles.

Comparte este artículo

Entra en la discusión y deja tu comentario

  • Deiby Rodriguez

    Muy interesante el el articulo, podrías explicar también como utilizarlo en los CDN, como hacer rutas y por último conectarse a una api para consumir datos, Gracias.

    • F. J. Martinez

      Durante el curso vamos a crear una SPA (Single Page Aplication) completa. Trataremos todos los temas de routing, api, manejo de state con vuex, etc…

      En cuanto al uso de CDN sólo te lo aconsejo en proyectos donde quieras hacer algo sencillo con un único componente o scope. En esta serie nos centraremos en usar webpack para poder importar y exportar módulos y así poder organizar mejor la aplicación.

  • duvierable

    Hola, excelente el curso, tengo una duda, es que a mi no me aparece el archivo gulp, muchas gracias

    • F. J. Martinez

      Hola, si has instalado un proyecto con Laravel 5.4 tendrás que hacer npm run dev ya que ahora viene con Mix instalado (La nueva versión de Elixir)

      • duvierable

        Bueno, muchas gracias !!

  • Jose Luis Bustos Valencia

    Muy interesante, seria bueno que explicara como hacer el login, cuando continua la serie

Veces