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

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

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!

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

Carlos Eduardo Gomez García

Profesor

Jhonathan Alfonso

Estudiante

Elvis Saavedra

Jorge Baumann

Jesus Varela

David Vargas Domínguez

Adrián Castillo

Juan Esteban Galvis

Luis Nayib Santana

Cristhian Daza

Platzi Team

Kelly Jesus Salazar Sanchez

Wilfred Vásquez

Omar Crespo

Paola Roxalys Carrera Giron

Eduardo Razo Cobián

Josafat Morales Toledo

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

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