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í:
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íaimport BootstrapVue from'bootstrap-vue'// Traer el cssimport'bootstrap/dist/css/bootstrap.css'import'bootstrap-vue/dist/bootstrap-vue.css'// Darlo de alta
Vue.use(BootstrapVue)
Tu fichero main.js, cuando lo actualices, debería tener el siguiente contenido:
// Paquetes de npmimport Vue from'vue'import BootstrapVue from'bootstrap-vue'// Archivos locales de nuestra Appimport App from'./App.vue'import router from'./router'import store from'./store'// CSS globalimport'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 Vuenew 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><divclass="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!
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:
vueadd 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
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.
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!
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.