在Vue3中使用Bootstrap5

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

使用 npm install 或通过将引导程序添加到package.json.

npm install --save bootstrap

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

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

然后，使用 Bootstrap 组件的最简单方法是通过data-bs-属性。例如，这里是 Bootstrap Collapse 组件...

        <button 
            
           >
            Bootstrap collapse
        </button>
        <div>
            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>
           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>
    <button
     
      type="button"
     
     
      aria-expanded="false"
    >
      Check Bootstrap
    </button>
    <ul aria-labelledby="dropdownMenuButton1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
    </ul>
  </div>

结果：