Contenido del curso

Bienvenida al curso

1
Vue consumiendo APIs oficiales de Blizzard
13:27 min

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de los componentes y layouts de nuestro proyecto

Agregando funcionalidades avanzadas a nuestro proyecto

Antes de continuar, vamos a limpiar y a organizar un poco más el proyecto 🧹, a darle forma y color. ¡Una app de Diablo III no puede tener el fondo blanco!

Si te fijas bien, todavía tenemos el componente HelloWorld.vue dentro de /src/components. Vamos a eliminarlo, que ya no nos hace falta.
Una vez borrado, verás un error en la terminal, porque la vista Home está haciendo uso de este componente que ya no existe. Tenemos que actualizar el contenido de la vista Home (/views/Home/Index.vue), que hacía uso de este componente. Podemos dejarlo así:

&lt;template&gt;
  &lt;div class=&quot;home&quot;&gt;
    &lt;img alt=&quot;Vue logo&quot; src=&quot;../../assets/logo.png&quot;&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// @ is an alias to /src
export default {
  name: 'Home'
}
&lt;/script&gt;

Del componente vista /views/Home/Index.vue vamos a borrar también la imagen con el logo de Vue. Podemos dejar una etiqueta h1 con el nombre de la página, algo como esto:

&lt;template&gt;
  &lt;div class=&quot;home&quot;&gt;
    &lt;h1&gt;Home Page&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// @ is an alias to /src

export default {
  name: 'Home'
}
&lt;/script&gt;

Tu página Home se vería así:

La temática de nuestra aplicación esta basada en el juego Diablo III, por ello vamos a darle un toque más oscuro a nuestra web. Vamos a cambiar los estilos de CSS de nuestro fichero App.vue y vamos a dejarlo así:

&lt;template&gt;
  &lt;!-- Esta parte no la hemos tocado aún --&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;div id=&quot;nav&quot;&gt;
      &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt;
      |
      &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;router-view/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style lang=&quot;stylus&quot;&gt;
  #app
    padding 60px 0
    font-family 'Avenir', Helvetica, Arial, sans-serif
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    color #ffffff // Le ponemos un color de letra blanco para que resalte
    background-color #15202b // Le cambiamos el color de fondo por un azul marino oscuro
&lt;/style&gt;

Stylus

> 📗 Recuerda que estamos usando Stylus Lang como pre-procesador CSS. Lo que me gusta de Stylus es que es sencillo y limpio, a la vez que potente y funcional.

No hace falta que uses ; para terminar las sentencias, o los : para separar la clave del valor, puedes omitir las llaves ({, }) de abrir/cerrar clases. Desde mi punto de vista, se ve mejor y más elegante. Aunque al final, cuando se "compile", se verá como CSS normal y corriente.

Durante este curso, intentaremos seguir este estilo a la hora de escribir CSS con Stylus:

No llaves {}
No punto y coma ;
No dos puntos :

Como son opcionales, los puedes usar si lo prefieres. Durante el curso, intentaremos seguir este estilo, lo más minimalista posible. Menos cosas que escribir 😉.

Estilos CSS oscuros para aplicaciones Vue.js con Stylus

Comentarios

Jorge Baumann

teacher•

¿Conocías Stylus? ¿Qué te parece?

Tony Gael

student•

No tenía ni idea! jajaja! Pero... @baumanzone, espero se vengan mas cursoriales tuyos! ( curso + tutoriales ) hasta el momento vengo aprendiendo mucho!

Jorge Baumann

teacher•

¡Gracias, compañero! De eso se trata, de aprender 🤘

Carlos Eduardo Gomez García

teacher•

Yo en lo personal prefiero usar llaves, puntos y comas y dos puntos, si a mi me quitas eso me pierdo a leer el código, siento que es un código muy desordenado, para mi elegante es usar las llaves porque así puedo identificar los patrones e identificar rápidamente el bloque de código Con stylus o pug en el caso de HTML, tengo que estar mirando los niveles de identación, que son espacios en blanco y ver que si este está en el nivel correcto o no.

Además tengo una extensión en VSCode (Bracket color pair) que me hace el highlight del bloque en el que estoy trabajando y se me hace mucho más fácil la lectura.

Pero cada quien sus gustos, igual tampoco está mal aprender Stylus para cualquier cosa en el futuro:D

Jorge Hernandez

student•

Pienso lo mismo

Jorge Baumann

teacher•

Yo opino al revés, cuanto menos escriba mejor, más limpio y menos código que tener que entender ;P

Juan Esteban Galvis

student•

Stylus es muy bueno, me he acostumbrado más a Sass, pero también recomiendo el curso de Stylus en Platzi: https://platzi.com/cursos/stylus/

Cuando aprendes proprocesadores, nunca vuelves a usar CSS como un simple mortal jaja

Jorge Baumann

teacher•

Hay que saber usar los dos, pero que no se te olvide css puro, que es el más importante!

Platzi Team

student•

Mientras iba leyendo estaba pensado lo mismo jajaja es verdad en casos muy especificos se vuelve a utilizar css

Cheché Pech

student•

go ahead!

Jorge Baumann

teacher•

¿Cómo lo llevas?

Alejandro Luján

student•

Me parece muy parecido Stylus a Sass, por no usar llaves ni punto y coma, estan geniales los dos :P

Jorge Baumann

teacher•

Yo sigo prefiriendo stylus🤭

Josafat Morales Toledo

student•

creo que sin punto y coma puedo vivir pero sin llaves y dos puntos no al final se los termine poniendo

Jose Orlando Parra Soto

student•

vamos super bien

&lt;template&gt;
  &lt;div class=&quot;home&quot;&gt;
    &lt;img alt=&quot;Vue logo&quot; src=&quot;../../assets/logo.png&quot;&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// @ is an alias to /src
export default {
  name: 'Home'
}
&lt;/script&gt;

&lt;template&gt;
  &lt;div class=&quot;home&quot;&gt;
    &lt;h1&gt;Home Page&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// @ is an alias to /src

export default {
  name: 'Home'
}
&lt;/script&gt;

&lt;template&gt;
  &lt;!-- Esta parte no la hemos tocado aún --&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;div id=&quot;nav&quot;&gt;
      &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt;
      |
      &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;router-view/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style lang=&quot;stylus&quot;&gt;
  #app
    padding 60px 0
    font-family 'Avenir', Helvetica, Arial, sans-serif
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    color #ffffff // Le ponemos un color de letra blanco para que resalte
    background-color #15202b // Le cambiamos el color de fondo por un azul marino oscuro
&lt;/style&gt;

Bienvenida al curso

Vue consumiendo APIs oficiales de Blizzard

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

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

Desarrollo de Aplicaciones con APIs de Blizzard: Guía Completa

Estructura y gestión de carpetas en proyectos Vue.js

Instalación y configuración de librerías en Vue con Bootstrap

Configuración de Axios para llamadas a APIs de Diablo III

Gestión de Tokens con Vuex: Integración y Almacenamiento en Vue.js

Creación de los componentes y layouts de nuestro proyecto

Componente Reutilizable de Carga con Vue.js