Creación de Aplicaciones Vue.js con API de Diablo III

Clase 2 de 27 • Curso Avanzado de Vue.js 2

Clase anteriorSiguiente clase

D3PF: aplicación Vue.js creada desde cero que consume las API oficiales de Diablo III, el famoso juego de Blizzard. Ofrece un buscador de jugadores reales del juego para mostrar sus estadísticas y personajes.

main.png

Vue CLI

📗 https://cli.vuejs.org/

Vue CLI (es decir, la interfaz de línea de comandos) es una herramienta para crear proyectos de Vue.js de forma rápida, desarrollada por el equipo de Vue.js.

Para usar esta herramienta deberás tenerla instalada (recomendado de manera global). Si ya la tienes instalada, puedes saltarte este paso.

Y recuerda, para seguir este curso es obligatorio que tengas Vue CLI instalado.

Instalar Vue CLI

Desde tu terminal escribe el siguiente comando:

npm install -g @vue/cli
# O
yarn global add @vue/cli

Una vez instalada la herramienta, podemos empezar a crear nuestro proyecto. Existen dos formas de crear un proyecto con el CLI de Vue:

  • A través de la terminal: vue create nombre_proyecto (esta es la que vamos a usar nosotros).
  • A través de una interfaz gráfica: vue ui (a través del navegador, vas seleccionando con el ratón las opciones que te interesan).

Crear el proyecto con Vue CLI

Desde la terminal escribe el siguiente comando:

vue create diablo3

Elige la forma manual y después te debería aparecer lo siguiente:

create-1.png

El CLI de Vue está preguntando qué features quieres instalar en el proyecto. Vamos a instalar todas las que están marcadas en verde (para marcar una opción usa la tecla space y para moverte usa las flechas de ⬆️ / ⬇️).

  • Babel.
  • VueRouter para el manejo de rutas.
  • Vuex para la gestión del estado.
  • Pre-procesador CSS.
  • Linter estricto. Si no has usado uno antes, seguro que te cuesta adaptarte. Pero verás que merece la pena. Ahora todo tu código, incluso si trabajas con varias personas en el proyecto, va a tener el mismo estilo, pues de esto se va a encargar el linter. ¡Le va a dar un toque muy profesional a tu aplicación! 😉
  • Testing: unitario y end to end (E2E).

Cuando tengas todo marcado, presiona la tecla enter y al terminar empezará a hacer preguntas que irás respondiendo una a una hasta llegar al final.

Estas son las opciones que debes elegir:

create-2.png

  • History mode: elige no. Esto sirve para dejar o quitar el hash (#) de la url. En nuestro caso lo hemos dejado.
  • El pre-procesador de CSS que vamos a elegir es Stylus, me gusta porque es potente, simple y elegante.
  • Linter, vamos a tener dos opciones:
    • La primera: Standard Config. Es la configuracion de linteado que mas me gusta. Está basada en Standard Js.
    • La segunda: marcamos las dos opciones Lint on save y Lint and fix on commit. Con esta configuración no vamos a poder hacer commit si tenemos algún error de linteado.
  • Como herramienta de testing unitario utilizaremos Jest.
  • Para testing E2E usaremos Cypress.
  • En esta opción elegimos In package.json. Esto guardará las configuraciones de algunas librerías dentro de ese fichero.
  • Y por último, pregunta si queremos guardar estas opciones para poder usarlas por defecto en el futuro. Puedes elegir la que quieras, en esta ocasión vamos a marcar no.

Ahora empezará a instalarse todo lo que hemos ido marcando. Cuando termine, si todo ha ido bien, deberías ver la siguiente pantalla:

create-3.png

Si no tienes instalado yarn, puedes usar npm, es (casi) lo mismo.

Por lo tanto, para arrancar la aplicación desde la terminal hacemos lo siguiente:

  • Vamos a la carpeta del proyecto: cd diablo3/.
  • Ejecutamos el servidor en modo desarrollo. Bien con npm run serve o con yarn serve.

Cuando el servidor esté levantando verás algo como esto:

create-4.png

Ahí nos indica que nuestra aplicación Vue está levantada en la url http://localhost:8080 con el siguiente contenido:

create-5.png

💡 Para evitar que nos salga un error en la terminal, como el de aquí abajo, vamos a modificar el fichero package.json, en concreto el bloque de devDependencies. Esto se debe a un error no corregido por parte de la librería babel-eslint.

error-babel.png

    "@vue/cli-service": "^4.2.0",
    "@vue/eslint-config-standard": "^5.1.0",
    "@vue/test-utils": "1.0.0-beta.31",
-   "babel-eslint": "^10.0.3",
+   "babel-eslint": "7.2.3",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",

Actualiza la versión que tengas de babel-eslint a la 7.2.3. En mi caso, he pasado de la versión ^10.0.3 a la 7.2.3. Hazlo ahora, para que luego en el futuro no te de problemas.

¡Enhorabuena! Ya has creado tu app con el CLI de Vue.
En la siguiente sección repasaremos la documentación de las API de Blizzard para saber cómo usarlas y empezar a construir nuestra aplicación.