En este tutorial, veremos por ejemplo cómo integrar Bootstrap 4 con Vue.js usando Bootstrap-Vue y Vue CLI.
En particular, veremos cómo usar el complemento Bootstrap Vue CLI a través del vue add @techiediaries/bootstrap
comando para instalar rápidamente Bootstrap en su proyecto Vue sin muchas complicaciones.
Bootstrap 4 es un marco HTML / CSS popular para crear sitios web receptivos. Sin embargo, para la mayoría de los componentes que necesitan JavaScript, se requiere jQuery . Veamos cómo usar Bootstrap 4 con Vue.js usando Bootstrap-Vue que proporciona una implementación sin depender de un jQuery.
Usando Bootstrap 4 con Vue.js
Dado que Bootstrap depende de jQuery, usarlo con Vue.js es de alguna manera complicado. Entonces, la comunidad ha creado algunas implementaciones que eliminan el requisito de jQuery:
En este tutorial, veremos cómo usar Bootstrap-Vue.
Cómo usar Bootstrap-Vue
Puede usar Bootstrap-Vue de varias maneras, como:
- Instalándolo desde npm usando el
npm i bootstrap-vue
comando, - Uso de plantillas vue-cli para andamiaje de proyectos preconfigurados como
webpack simple
ywebpack
, - Usando el complemento Bootstrap Vue CLI a través del
vue add @techiediaries/bootstrap
comando
Paso 1: instalación de Vue CLI 4
Comencemos instalando Vue CLI en nuestra máquina de desarrollo.
Dirígete a una interfaz de línea de comandos y ejecuta el siguiente comando:
$ npm i -g vue-cli
A continuación, inicializamos nuestro proyecto Vue usando el siguiente comando:
$ vue create vuebootstrapdemo
Simplemente, presione Retorno para aceptar los valores predeterminados.
A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor de desarrollo:
$ cd vuebootstrapdemo
$ npm run serve
Podrá ver la siguiente interfaz si va a http: // localhost: 8080 / con su navegador web:
A continuación, abra una nueva interfaz de línea de comandos y navegue hasta la carpeta de su proyecto y ejecute el siguiente comando para agregar Bootstrap-Vue a su proyecto sin mucha molestia:
$ cd vuebootstrapdemo
$ vue add @techiediaries/bootstrap
Esta es la estructura de nuestro proyecto:
├── index.html
├── node_modules
│ └── ...
├── package.json
├── package-lock.json
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js
Trabajaremos principalmente con los archivos App.vue
y main.js
. Si abre el src/main.js
archivo, podrá ver el siguiente código, que importa la hoja de estilo Bootstrap y Bootstrap-Vue:
import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
A continuación, si abre el src/plugins/bootstrap-vue.js
archivo, verá el siguiente código:
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)
Este es el código para importar Bootstrap 4 y Bootstrap-Vue en nuestro proyecto que fueron agregados automáticamente por el complemento.
Trabajar con componentes Bootstrap-Vue
Veamos ahora cómo usar algunos componentes de Bootstrap-Vue en nuestro proyecto.
Abra el src/App.vue
archivo y actualícelo con este ejemplo de los documentos oficiales :
<template>
<div>
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
required
placeholder="Enter name"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-3" label="Food:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<b-form-group id="input-group-4">
<b-form-checkbox-group v-model="form.checked" id="checkboxes-4">
<b-form-checkbox value="me">Check me out</b-form-checkbox>
<b-form-checkbox value="that">Check that out</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
<b-card class="mt-3" header="Form Data Result">
<pre class="m-0"></pre>
</b-card>
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: '',
name: '',
food: null,
checked: []
},
foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
show: true
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
alert(JSON.stringify(this.form))
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.form.email = ''
this.form.name = ''
this.form.food = null
this.form.checked = []
// Trick to reset/clear native browser form validation state
this.show = false
this.$nextTick(() => {
this.show = true
})
}
}
}
</script>
Conclusión
En este tutorial, hemos visto cómo usar Bootstrap-Vue usando Vue CLI 4 para agregar componentes similares a Bootstrap a las aplicaciones Vue.js.
0 Comentarios
Dejanos tu comentario para seguir mejorando!