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.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 15

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥測鈥 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 鈥渞eglas鈥 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 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!

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,

Genial prefiero Bootstrap aunque a la mayoria no les guste 馃槃