Creación de Aplicaciones Vue.js con API de Diablo III
Todos los cursos GRATIS
Se acaba en:
:::
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.
jaja, bien dicho!
Seria bueno agregar que después de realizar el cambio en las versiones del paquete que menciona e la última parte es necesario ejecutar nuevamente:
npm install
Esto revisa tu archivo package.json para instalar las versiones especificadas para cada paquete
Totalmente cierto. ¡Eso deben hacer!
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!!
Hola! ¿Lograste hacerlo, qué tanto lío dió hacerlo en Vue3?
El contenido del curso podría ser compatible con vue 3? o debo elegir vue 2?
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
Instalen las versión 2 de Vue, no la 3 o van a tener muchos problemas porque los plugins todavía no son compatibles a la fecha que comento esto
Gracias por el aporte!
Acabo de crear el proyecto y en el package.json tengo babel-eslint==^10.1.0, no me arrojó ningún error, quiero pensar que ya lo corrigieron :)
Todavía no te va a salir el error. Hasta que no avances un par de clases, no te va a salir :D
He terminado el curso, y he pasado el proyecto de Vue 2 a Vue 3.
De Webpack a Vite, de Options Api a Compostion Api, y de Vuex a Pinia.
Si quieren hacer el curso en Vue 2 y pasarlo a Vue 3, sepan que se puede, si quieren hacerlo en Vue 3 con Composition, tambien los invito a probar.
Hay que aprovechar el formato de texto.
¡Mucha suerte!
justo voy a comenzar este curso y lo hare en vue2, gracias por tu comentario y animos!
@fidelangel muchas gracias, éxitos también!
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?
Intenta con la versión actual, si te da el error regresa al que menciona en el post. Haré lo mismo
Al final si dejé la otra versión para evitarme el dolor de cabeza a futuro jaja
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!
vue.cmd create diablo-dashboard
¡Gracias! Creo que nadie se quejó antes de eso, pero está bien saberlo 🙌
Yo también tuve problemas en Windows. Pero lo solucione así: npx vue create diablo3
A qué se debe el Error de babel-eslint ?
Hace mucho tiempo que lo busqué y ahora mismo no recuerdo. Alguna compatibilidad o algo con algún paquete, no estoy seguro.
Mmm, los textos siguen teniendo muchos errores de compilación del Markdown
Ya se arreglaron.
Por que no usar el History Mode? 🤔
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.
Además si lo hacer la url se ve limpia.
Hola, estoy tomando el curso pero a la hora de hacer serve o build de la app me salta este error...
Tengo nodejs 16.12.0 y npm 8.1.0, vue/cli 4.5.15
error in./src/App.vue?vue&type=template&id=7ba5bd90
SyntaxError:RangeError:/home/emighino/Escritorio/app/src/App.vue:Maximum call stack size exceeded
at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) @ ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-3191:0-319 @ ./src/App.vue @ ./src/main.js @ multi(webpack)-dev-server/client?http://192.168.0.187:3030&sockPath=/sockjs-node(webpack)/hot/dev-server.js./src/main.js error in./src/views/About.vue?vue&type=template&id=039c5b43
SyntaxError:RangeError:/home/emighino/Escritorio/app/src/views/About.vue:Maximum call stack size exceeded
at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) @ ./src/views/About.vue?vue&type=template&id=039c5b43 1:0-3361:0-336 @ ./src/views/About.vue @ ./src/router/index.js @ ./src/main.js @ multi(webpack)-dev-server/client?http://192.168.0.187:3030&sockPath=/sockjs-node(webpack)/hot/dev-server.js./src/main.js error in./src/views/Home.vue?vue&type=template&id=fae5bece
SyntaxError:RangeError:/home/emighino/Escritorio/app/src/views/Home.vue:Maximum call stack size exceeded
at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) at Array.map(<anonymous>) @ ./src/views/Home.vue?vue&type=template&id=fae5bece 1:0-3351:0-335 @ ./src/views/Home.vue @ ./src/router/index.js @ ./src/main.js @ multi(webpack)-dev-server/client?http://192.168.0.187:3030&sockPath=/sockjs-node(webpack)/hot/dev-server.js./src/main.js
¿Puede ser un tema de dependencias? Creo que se menciona en una clase futura del curso con un cambio en las dependencias del package.json
Como actualizalo la version de babel-eslint de 10.1.0 a 7.2.3 ?
Escribe en el package.json la versión que quieres.
Busca como instalar con NPM una version especifica, o cambia el numero de version en package.json e instala todo de nuevo.
Ya emocionado...
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
Hola, ¿lo arreglaste?
¿Qué version de node estás usando?
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
Ese hash te sirve para navegar en secciones de la pagina o crear animaciones con el scroll en vue
