在Vue 3中使用Bootstrap 5

我想在Vue 3中使用Bootstrap 5。由于Bootstrap 5使用vanilla JS（没有JQuery），我可以在Vue 3项目中直接使用Bootstrap 5吗（不使用Bootstrap-Vue）？谁能指导我如何在Vue 3中使用Bootstrap 5？

Bootstrap 5不再需要jQuery，所以它更容易与Vue一起使用，也不再需要bootstrap-vue这样的库了。

像你在Vue项目中安装任何其他JS模块一样，使用npm安装或将其添加到package.json...

npm install --save bootstrap
npm install --save @popperjs/core

接下来，将Bootstrap的CSS和JS组件添加到Vue项目的入口处（即：src/main.js）。

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

那么，使用Bootstrap组件的最简单方法就是通过data-bs-属性。例如，这里是Bootstrap的折叠组件...

<button 
  class="btn btn-primary" 
  data-bs-target="#collapseTarget" 
  data-bs-toggle="collapse">
  Bootstrap collapse
</button>
<div class="collapse py-2" id="collapseTarget">
  This is the toggle-able content!
</div>

带导航条组件的演示

或者，你可以导入任何Bootstrap组件并将它们包装成Vue组件。例如，这里有一个Popover组件...

import { Popover } from bootstrap;

const popover = Vue.component('bsPopover', {
  template: `
    <slot/>
  `,
  props: {
    content: {
      required: false,
      default: '',
    },
    title: {
      default: 'My Popover',
    },
    trigger: {
      default: 'click',
    },
    delay: {
      default: 0,
    },
    html: {
      default: false,
    },
  },
  mounted() {
    // pass bootstrap popover options from props
    var options = this.$props
    var ele = this.$slots.default[0].elm
    new Popover(ele,options)
  },
})

<bs-popover
  title="Hello Popover"
  content="This is my content for the popover!"
  trigger="hover">
    <button class="btn btn-danger">
      Hover for popover
    </button>
</bs-popover>

演示|阅读更多。

是的，你可以在没有Bootstrap-Vue的情况下使用Bootstrap。 用npm来安装这两个包。

npm install --save @popperjs/core bootstrap@next

将Bootstrap导入到src/main.js中。

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

Vue模板的使用实例。

<div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Check Bootstrap
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

其结果是。

一旦你理解了Bootstrap模版的工作原理，就很容易实现这一点。Bootstrap模版有一个类为modal fade的div元素。当它被触发时，这个元素也会得到show和d-block类。此外，body标签得到一个额外的modal-open类。当模态被关闭时，这个过程被逆转。了解了这一点，我们就可以在自己的代码中轻松实现Bootstrap 5模态。

在你的代码中导入Bootstrap 5的CDN。将CSS和JS都添加到你的代码中。

我们的单页组件样本看起来会是这样的。

<template>
<div>  
    <p>Test modal<a href="#" @click="modalToggle">now</a></p>
    <div>
        <button type="button" class="btn btn-primary" @click="modalToggle">My Modal</button>
            <div
            ref="modal"
            class="modal fade"
            :class="{ show: active, 'd-block': active }"
            tabindex="-1"
            role="dialog">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                    @click="modalToggle">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                <p>Modal body text goes here.</p>
                </div>
            </div>
            </div>
        </div>
        <div v-if="active" class="modal-backdrop fade show"></div>
        </div>
</div>
</template>

在这里，我们使用的是基本的Bootstrap 5模态。

<script>
export default {
data() {
    return {
    active: false,
    }
},
methods: {
    modalToggle() {
    const body = document.querySelector("body")
    this.active = !this.active
    this.active ? body.classList.add("modal-open") : body.classList.remove("modal-open")
    },
},
}
</script>

在这里，我们有一个变量active，最初被设置为false。所以模态不会在页面加载时显示出来。当点击一个链接时，我们使用一个方法来切换这个变量。这将从我们的模态中移除显示属性和d-block类，并从body标签中移除modal-open属性。

虽然Bootstrap的CSS可以与任何框架（React、Vue、Angular等）一起使用，但Bootstrap的JavaScript与它们并不完全兼容。

以下是来自Bootstrap 5 docs的官方推论。

While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.

文档指出，要使用其他特定框架的包来代替Bootstrap的JavaScript，如React Bootstrap，BootstrapVue，以及ng-bootstrap等。

不幸的是，BootstrapVue只与Vue2/Nuxt2兼容，目前还没有适用于Vue3/Nuxt3的版本。

请添加此包：npm install --save @popperjs/core

bootstrap 5必须要有popper才能运行，用这个npm试试。

npm install --save bootstrap 
npm i @popperjs/core

要使引导程序与 SSR一起工作，你不能。

import "bootstrap";

正如其他人所建议的那样，因为它将给你一个错误。

document is not defined

这不是一个最佳的解决方案，但它将会发挥作用

npm install bootstrap

而且只在你的样式标签中导入bootstrap scss，这样你就可以访问bootstrap变量等了。

<style lang="scss">

@import 'bootstrap/scss/bootstrap';

.sticky-sidebar {
  z-index: $zindex-sticky;
  ...
}

</style>

然后只需将bootstrap bundle添加到你的header。注意：你不需要添加css，因为它已经被导入到你的组件中了。