最近搭建了一个新的项目，需要依赖于 bootstrap5 这个 UI 框架，但是查了官方文档没有找到对应的教程，因此本文讲记录下我在 vue3 中使用 bootstrap5 过程中积累的相关经验，希望对前端开发者有点帮助。话不多说，直接进入主题吧。
引入 bootstrap UI 库
通过查阅百度和谷歌，找到了 BootstrapVue 这个仓库，后来发现使用起来也不是很方便，其实官方 bootstrap 可以直接拿来用，不需要通过第三方封装。这样也方便自己维护。
安装官方的 bootstrap 仓库
npm install --save @popperjs/core bootstrap@next
在 main.js 文件下加入
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
组件用法
比如我们想使用一个 nav 组件，可以直接使用，因为 bootstrap5 是通过 data-bs-target 就可以直接实现了
<button class="btn btn-primary" data-bs-target="#collapseTarget" data-bs-toggle="collapse">Bootstrap collapse</button>
<div class="collapse py-2" id="collapseTarget">内容</div>
高级用法
有些组件依赖第三方库，比如 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 1024"
content="This is my content for the 1024nav!"
trigger="hover">
<button class="btn btn-danger">
鼠标上来
</button>
</bs-popover>
