Instalar librerías

5/27

Lectura

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:

BS-vue

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

Aportes 15

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

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'

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ó

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.

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

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'

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

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

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

tengo este error al iniciar el servidor

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

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,

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!

Genial prefiero Bootstrap aunque a la mayoria no les guste 😄