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

Clase 5 de 27 • 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í:

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

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 =&gt; 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:

&lt;template&gt;
  &lt;div class=&quot;hello&quot;&gt;
    &lt;b-button&gt;Just a Button!&lt;/b-button&gt;
  &lt;/div&gt;
&lt;/template&gt;

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!

Comentarios

Carlos Eduardo Gomez García

teacher•

Una forma más fácil de instalar bootstrap vue y hacer la configuración de manera automática es usando su plugin para el CLI, basta con correr el siguiente comando:

vue add bootstrap

Con eso el mismo instala los paquetes de npm necesarios y hace la configuración en el main.js, si te pregunta algo sobre uncommited changes, has commit con git y luego corre el comando y escribes "y" esto sobreescribirá algunos componentes, así que solo es cuestión de volver a organizarlos

Jhonathan Alfonso

student•

Gracias bro, funciono mucho mejor!

Elvis Saavedra

student•

En mi caso, como estoy usando Vue3 no me funciona bootstrap-vue, estuve buscando y encontré 2 opciones, primevue y element.

Jorge Baumann

teacher•

Algunos compañeros hicieron el proyecto con Vue 3 y con bootstrap. Pero puedes hacerlo como quieras.

Elvis Saavedra

student•

Agregué bootstrap para las grillas y los estilos, pero como librería de componentes no se puede ya que aún no es compatible, hasta el momento llevo haciendo el curso usando los componentes de element y todo bien. Muy buenas las clases, saludos.

Jesus Varela

student•

Hola, para los que quieran implementar bootstrap en Vue3, deben instalar esta dependencia ya que la indicada solo funciona para vue2

npm i bootstrap-vue-3

Al momento de realizar la importación, se cambiaría el nombre a la librería instalada.

import BootstrapVue from 'bootstrap-vue-3'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

David Vargas Domínguez

student•

Me había arrojado un error con la imagen, que no la encontraba. Estaba así

Antes

    <img alt="Vue logo" src="../assets/logo.png" />

Para arreglarlo aproveche el alias que se coloca por defecto al crearse el proyecto src/ -> @

    <img alt="Vue logo" :src="require('@/assets/logo.png')" />

Y se arregló

Carlos Eduardo Gomez García

teacher•

Genial, pero puedes usar el @ sin necesidad de hacer el require, con esto basta:

<img alt="Vue logo" src="@/assets/logo.png" />

Al menos a mi me funcionó:D

Adrián Castillo

student•

Como puedo saber cuales son las "reglas" de ESlint aplicadas, porque recientemente note que al NO colocar un espacio seguido de un comentario " //Comentario ... // Comentario" Solamente por eso me da error al compilar.

Jorge Baumann

teacher•

Son las reglas por defecto, pero te irás acostumbrando mientras te vayan saliendo. Puedes correr el comando npm run lint para que se haga de manera automática el ajuste (siempre que se pueda)

Juan Esteban Galvis

student•

Dejo la documentación de Bootstrap-Vue: https://bootstrap-vue.org/

Luis Nayib Santana

student•

Para los que esten empezando el curso 2022, les recomiendo hacerlo con VUE 2x e instalar todas las dependencias después de crear el proyecto. ejemplo

vue add eslint

vue add bootstrap

Se ahorraran muchos problemas al momento de comenzar el proyecto. Yo despues de 1 hora intentando comenzar, la mejor solucion fue hacerlo manual todo. espero que les funcione!

Cristhian Daza

student•

Para organizarlo mejor, una vez instalado bootstrap-vue, dentro de la carpeta plugins, agregamos un archivo bootstrap-vue.js, agregamos:

import Vue from 'vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Y en el main.js solo agregamos:

import './plugins/bootstrap-vue'

Platzi Team

student•

Genial, el curso va muy bien, que interesante que sea de lectura y esta genial, grandes aportes de los compañeros

Kelly Jesus Salazar Sanchez

student•

Puedo ser libre de usar otro como vuetify en vez de bootstrap?

Jorge Baumann

teacher•

Claro que sí, usalo al gusto. Cuando completes el curso, comparte el resultado

Jorge Baumann

teacher•

Hay algunos estudiantes que usaron vuetify en vez de bootstrap-vue, no hay problema.

Wilfred Vásquez

student•

Buen día. Tengo un problema. Cada vez que realizo un cambio debo reiniciar el serve. No se autorecarga?

Jorge Baumann

teacher•

Hola, debería tener auto recarga. ¿Cómo has creado el proyecto? ¿Usaste vue-cli?

Jorge Baumann

teacher•

Comparte tu repositorio y lo revisamos,¿te parece bien?

Omar Crespo

student•

tengo este error al iniciar el servidor

Jorge Baumann

teacher•

La imagen, el logo, no lo encuentra

Omar Crespo

student•

como se solucionaria? porque ni idea jaja

Luis Nayib Santana

student•

Buenas, no me deja incializar el server error

<Component name "Index" should always be multi-word  vue/multi-word-component-names>  en la terminal.

Ni tampoco instalar las dependencias.

$ npm install bootstrap-vue axios numeral --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.6.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0

Jorge Baumann

teacher•

¿Puede ser que tengas mal escrito el nombre o que el nombre del componente no sea compuesto?. Ejemplo:

mal: componente
bien: componenteBase

Paola Roxalys Carrera Giron

student•

Ojo con esto: npm config set legacy-peer-deps=true --location=project

Eduardo Razo Cobián

student•

Comandos para vue js 3

Instalar dependencias

npm install axios numeral --save 
npm i bootstrap-vue-3

Configuración del archivo main.js

import BootstrapVue from "bootstrap-vue-3";

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//CSS Global
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";

createApp(App).use(store).use(router).use(BootstrapVue).mount("#app");

Listo,

Josafat Morales Toledo

student•

Genial prefiero Bootstrap aunque a la mayoria no les guste :D

Cristhian Daza

student•

Bootrsap es muy bueno, lo malo es que la mayoría de sitios que usan Bootstrap se ven iguales.

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

// 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)

// 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 =&gt; h(App)
}).$mount('#app')

<Component name "Index" should always be multi-word  vue/multi-word-component-names>  en la terminal.

Ni tampoco instalar las dependencias.

$ npm install bootstrap-vue axios numeral --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.6.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0

import BootstrapVue from "bootstrap-vue-3";

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//CSS Global
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";

createApp(App).use(store).use(router).use(BootstrapVue).mount("#app");

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