Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales

Curso Avanzado de Vue.js 2

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

Tomar examen

Antes de continuar, necesitamos tener un directorio en el cual guardar nuestros assets (imágenes, estilos CSS, tipografías, etc.).

Por defecto, al crear el proyecto tenemos la carpeta /assets creada, con una imagen, el logo de Vue.
Lo primero que tenemos que hacer es borrar todo el contenido de la carpeta /assets. Una vez que esté vacía, vamos a crear 3 carpetas: img (para las imágenes), css (para nuestros estilos CSS globales) y fonts (donde guardaremos las tipografías que instalemos en el proyecto).

Tu carpeta /assets debería verse así:

📂 /assets 
   ├── 📂 /css
   ├── 📂 /fonts
   └── 📂 /img

Imágenes

Para agilizar el desarrollo del curso, descarga todas las imágenes de este repositorio (https://github.com/baumannzone/diablo3-vue-platzi) y guárdalas dentro de la carpeta de imágenes, en /assets/img. Las iremos explicando según las vayamos utilizando.

Fuentes

Si has jugado alguna vez al juego de Diablo (al I, al II o al III) y has visto el resultado final de la app https://diablo3.netlify.com, te habrás dado cuenta que, en ciertas partes de la app, se hace uso de una tipografía muy especial.

Esta es la fuente que usa nuestra aplicación:

Esta es la tipografía oficial del juego:

El juego de Diablo tiene una tipografía o fuente muy reconocible. Para intentar aproximarnos lo máximo posible a esto, nos vamos a descargar una fuente que se asemeja bastante y que, desde mi punto de vista, ¡es muy chula!
La fuente se llama DiabloHeavy y la puedes descargar de manera gratuita desde aquí: https://fontzone.net/font-details/diablo-heavy.
En caso de que no esté disponible, puedes ir al repositorio del proyecto y descargar los archivos de la carpeta /fonts, en assets.

Estilos CSS

Otra cosa que vamos a ver, es como tener estilos de CSS globales en nuestra aplicación. Esto puede sernos útil en varias ocasiones, cuando queremos sobrescribir los estilos de alguna librería externa, por ejemplo.
En este caso, no era necesario crear un archivo global de CSS, pero lo vamos a hacer por motivos prácticos.

Dentro de nuestra carpeta de /css, en /assets, vamos a crear un fichero css con extensión de Stylus (recuerda, el pre-procesador CSS del que hablamos antes). Crea el archivo con nombre main.styl. Aquí dentro, tendremos nuestro CSS global. Empezaremos cargando la fuente que acabamos de descargarnos, para tenerla disponible en nuestra aplicación.

Le agregamos este contenido a nuestro archivo main.styl:

// ---------------------
// Diablo-Like Font · DiabloHeavy Font
// ---------------------

// Damos de alta la fuente con el nombre "DiabloHeavy" y cargamos todos los formatos
@font-face
  font-family "DiabloHeavy"
  src url("../fonts/diabloh.eot")
  src url("../fonts/diabloh.eot?#iefix") format("embedded-opentype"),
  url("../fonts/diabloh.otf") format("opentype"),
  url("../fonts/diabloh.svg") format("svg"),
  url("../fonts/diabloh.ttf") format("truetype"),
  url("../fonts/diabloh.woff") format("woff"),
  url("../fonts/diabloh.woff2") format("woff2")
  font-style normal
  font-weight normal

// Creamos una clase que tenga de tipografía la fuente de Diablo
.font-diablo
  font-family "DiabloHeavy", sans-serif

Más adelante retomaremos este fichero, pero de momento, podemos dejarlo así.
En cuanto tengamos registrado nuestro archivo CSS global en la aplicación, podremos usar la clase .diablo-font en cualquier elemento (con texto) de nuestra aplicación, en el que queramos renderizar dicha fuente.

Para registrarlo, lo único que tenemos que hacer es importarlo desde el fichero principal, main.js:

// CSS global
import './assets/css/main.styl'

Puedes ponerlo debajo del CSS de la librería BootstrapVue. De esta forma estarás registrando dicho archivo CSS de manera global en tu proyecto y todas las clases que pongas ahí podrán ser usadas desde cualquier parte.

> Al crear el proyecto con el CLI de Vue, una de las opciones que teníamos era la de los "preprocesadores CSS".
Nosotros le indicamos que queríamos Stylus para el CSS, por lo tanto, cuando estamos escribiendo CSS con formato de Stylus, Webpack y sus amigos están transformando el código de Stylus a CSS válido. Y lo mejor, ¡no hemos tenido que configurar nada! 💃

Creo que ya podemos pasar al siguiente bloque de contenido, donde trabajaremos sobre el layout principal.

Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales

// ---------------------
// Diablo-Like Font · DiabloHeavy Font
// ---------------------

// Damos de alta la fuente con el nombre "DiabloHeavy" y cargamos todos los formatos
@font-face
  font-family "DiabloHeavy"
  src url("../fonts/diabloh.eot")
  src url("../fonts/diabloh.eot?#iefix") format("embedded-opentype"),
  url("../fonts/diabloh.otf") format("opentype"),
  url("../fonts/diabloh.svg") format("svg"),
  url("../fonts/diabloh.ttf") format("truetype"),
  url("../fonts/diabloh.woff") format("woff"),
  url("../fonts/diabloh.woff2") format("woff2")
  font-style normal
  font-weight normal

// Creamos una clase que tenga de tipografía la fuente de Diablo
.font-diablo
  font-family "DiabloHeavy", sans-serif

Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales

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

Estilos CSS oscuros para aplicaciones Vue.js con Stylus

Creación de Layouts con Vue y Bootstrap para Mejorar la UI

Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales

Creación de NavBar y Footer con BootstrapVue y FontAwesome

Refactorización de Importaciones en Vue.js con Plugins

Buscador de Perfiles en Diablo III: Creación de Formulario y Título

Rutas Dinámicas y Lazy Loading en Vue.js

Construcción y Consumo de APIs con Vue.js y Vuex

Creación y Uso de Componentes en Vue.js: MainBlock y TopHeroes

Visualización de Héroes con Bootstrap-Vue en Diablo III

Componente de Progreso de Actos en Vue.js

Implementación de Componentes Vue: MainBlock y PlayerStats

Navegación y Visualización de Artesanos en Vue.js

Funciones y Componentes para la Vista de Héroe en Vue.js

Agregando funcionalidades avanzadas a nuestro proyecto

Carga Diferida de Componentes en Vue.js: Mejora de Rendimiento

Implementación de Inventario de Objetos de Personaje en Vue.js

Directivas Personalizadas en Vue: Creación y Uso Básico

Configuración y despliegue de aplicaciones en Netlify con Vue.js

Creación y Personalización de Páginas en Vue.js