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

En este paso, vamos a instalar todas las librerías que va a usar nuestro proyecto de Diablo III.

Utilizaremos Bootstrap con Vue como framework de componentes. Esto nos ayudará a generar y crear rápidamente la estructura de nuestro proyecto: Bootstrap-vue

Para hacer las llamadas a las APIs utilizaremos axios, que es potente y muy fácil de usar.

En algunas ocasiones, necesitaremos formatear algunos valores numéricos. Para ello usaremos numeral.js a través de un filtro que implementaremos más adelante.

Más adelante instalaremos fontawesome, la fuente de íconos que tanto nos gusta. Por ahora la dejaremos de lado, volveremos a esto más tarde.

Para instalar las librerías, escribimos el siguiente comando en la terminal:

npm install bootstrap-vue axios numeral --save

Esto nos instalará las tres librerías y actualizará el package.json de nuestro proyecto. El bloque de dependencias (dependencies) se vería así:

"dependencies": {
+ "axios": "^0.19.2",
+ "bootstrap-vue": "^2.4.0",
	"core-js": "^3.6.4",
+ "numeral": "^2.0.6",
	"vue": "^2.6.11",
	"vue-router": "^3.1.5",
  "vuex": "^3.1.2"
}

Hora de configurar Bootstrap-Vue para poder usarlo en nuestro proyecto. En el fichero principal donde se instancia Vue, main.js , agregamos las siguientes líneas:

// Traer la librería
import BootstrapVue from 'bootstrap-vue'

// Traer el css
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Darlo de alta
Vue.use(BootstrapVue)

> Puedes ver más acerca de los plugins en Vue aquí.

Tu fichero main.js, cuando lo actualices, debería tener el siguiente contenido:

// Paquetes de npm
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

// Archivos locales de nuestra App
import App from './App.vue'
import router from './router'
import store from './store'

// CSS global
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Configuración extra
Vue.use(BootstrapVue)
Vue.config.productionTip = false

// Instancia principal de Vue
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Hemos dado de alta la librería de componentes Bootstrap-Vue a nivel global en nuestro proyecto. A continuación tenemos que probar que funciona. Cambia el contenido del archivo /components/HelloWorld.vue. Hay que borrar todo el contenido del template (es decir, del HTML) y poner lo siguiente:

<template>
  <div class="hello">
    <b-button>Just a Button!</b-button>
  </div>
</template>

Si vas al navegador, y abres tu aplicación, deberías ver el botón que acabamos de insertar:

¡Genial! Ya hemos instalado y configurado Bootstrap. ¡Vamos a la siguiente lectura!