vuejs3 - 将 Bootstrap 5 与 Vue 3 一起使用

Question

我想将 Bootstrap 5 与 Vue 3 一起使用。由于 Bootstrap 5 使用 vanilla JS(无 JQuery)，我可以在 Vue 3 项目中直接使用 Bootstrap 5(不使用 Bootstrap-Vue)吗？有人可以指导我如何将 Bootstrap 5 与 Vue 3 一起使用吗？

Answer 1

Bootstrap 5 不再需要 jQuery，因此与 Vue 一起使用更容易 ，并且不再需要像 bootstrap-vue 这样的库。
像在 Vue 项目中安装任何其他 JS 模块一样安装 bootstrap，使用 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>

Demo with Navbar component
或 ，您可以导入任何 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 |
Read more