将 Bootstrap 5 与 Vue 3 结合使用

我想将 Bootstrap 5 与 Vue 3 结合使用。由于 Bootstrap 5 使用普通 JS（无 JQuery），我可以直接在 Vue 3 项目中使用 Bootstrap 5（不使用 Bootstrap-Vue）吗？有人可以指导我如何将 Bootstrap 5 与 Vue 3 结合使用吗？

Bootstrap 5 不再需要 jQuery，因此更容易与 Vue 一起使用，并且不再需要像 bootstrap-vue 这样的库。

像使用 Vue 项目中的任何其他 JS 模块一样使用 npm install 或将其添加到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 Collapse 组件...

<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>

带有导航栏组件的演示

Or，您可以导入任何 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>

Demo | 阅读更多