Creación de Aplicaciones Vue.js con API de Diablo III
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.
Demo: revisa esta demo online para que veas qué es lo que vamos a construir juntos · https://diablo3.netlify.com. Puedes utilizar este usuario en el formulario SuperRambo#2613 para probar en la region EU.
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
# Oyarn 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:
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:
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:
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:
Ahí nos indica que nuestra aplicación Vue está levantada en la url http://localhost:8080 con el siguiente contenido:
💡 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.
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.
Vengo del futuro! He completado el curso y el examen y vengo a compartir algo que les va a ser útil, MUY ÚLTIL, para el curso y es:
npm run lint
Es posible que al copiar y pegar código de Platzi a tu proyecto surjan errores de linteo y Vue se ponga pesado con estos errores, este comando sirve para arreglar los errores de linteo automáticamente, y en caso de que no pueda arreglarlos automáticamente te dirá que cuál es el error y dónde está, recomiendo correrlo siempre que vayas a mirar tu aplicación en el navegador, así te evitas encontrarte con la pantalla de error.
Voy a intentar realizar este curso con lo mas nuevo de Vue. Vue 3 + Pinia (en lugar de vuex) + Quasar (en lugar de bootstrap) + Vite(en lugar de webpack). Deseenme suerte jaja… Here we go!!
Hazlo con Vue 2, te lo digo por experiencia, Vue 2 es muy usado aún, y realmente es casi similar a Vue 3, haz este curso con Vue 2 y después tómate el curso de Vue 3 donde verás únicamente las diferencias entre ambas versiones :D
Bro yo lo hice con vue3 en caso de que quieras hacerlo asi te dejo mi repo para que te guies un poco, no cambia mucho solo algunas cosas https://github.com/jasba24/diabloe3-vue
Haciendo lo de Babel Eslint me surgió la duda, ¿Aún es necesario hacerlo? Actualmente está la versión 10.1.0 igual y el error que sea ya se corrigió, ¿Qué pasa si dejo esa versión y en caso de que me de el error hago el downgrade?
Estando en windows me pasaba que cuando estaba creando el proyecto no funcionaba el comando vue create lo pude resolver con lo de abajo, ejecutando con permisos. Saludos!
Puedes usarlo o puedes no usarlo.
para mí es más cómodo no usarlo ya que no requiere de ninguna configuración adicional en el servidor.
Lo único que haces al no usarlo es dejar que el hashtag # aparezca en la url de tu aplicación. Como no supone ninguna molestia, yo personalmente lo prefiero así. Si por estética prefieres tener la URL limpia, puedes usarlo pero en el servidor en el que lo vayas a desplegar vas a tener que hacer una configuración extra.
Yo te recomiendo hacerlo, así después ya no tienes que modificar el archivo router/index.js (en realidad no es mucho). HTML5 History Mode Este es el link que te dice que tienes que agregar al archivo .htaccess de tu servidor compartido si es que piensas poner en producción o a prueba el proyecto.
Buenas tardes,
para quienes tengan un problema (como en mi caso), con el comando vue create nombreProyecto, pues les comento:
npx @vue/cli create appname
El problema: al escribir por ejemplo el comando: vue create diablo3 + [TECLA ENTER] sencillamente no sucede nada, no muestra errores y acto seguido vuelve a cargarse el prompt de la terminal, algo como esto:
Captura de pantalla de mi terminal al escribir el comando que falla
Me emociona el proyecto, veo que vamos a hacer uso de testing así que está super! Aunque eso de la opción de guardar todo en el package.json no me parece muy práctico, creo que por buenas prácticas es mejor dejar todo en archivos de configuración separado. Y lo del history mode... no entiendo por qué querríamos tener ese # en nuestras URL's
Si lo quieres cambiar, algunas veces necesitas configurar el servidor donde lo vayas a alojar. Con el # en la URL no te hace falta ninguna configuración externa ;P
