Agregue Bootstrap 4 con Vue CLI 3/4

 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/bootstrapcomando 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:

• Bootstrap-Vue
• VueStrap

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-vuecomando,
• Uso de plantillas vue-cli para andamiaje de proyectos preconfigurados como webpack simpley webpack,
• Usando el complemento Bootstrap Vue CLI a través del vue add @techiediaries/bootstrapcomando

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.vuey main.js. Si abre el src/main.jsarchivo, 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.jsarchivo, 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.vuearchivo 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.