Vue 3 中不可直接引入 Bootstrap JS 因其依赖 jQuery 且 Popper 版本冲突；CSS 可安全使用，JS 组件应改用 bootstrap-vue-3 或 vue-bootstrap-5，并注意初始化时机与 ref 绑定。
Vue 3 项目里直接 import Bootstrap CSS 和 JS 会报错
因为 bootstrap 的 js 依赖 jquery，而 vue 3 已彻底移除对 jquery 的兼容；同时其 popper.js 版本与 vue 的 dom 更新机制冲突，常见错误是 typeerror: cannot read properties of undefined (reading 'offsetparent') 或下拉菜单/tooltip 不触发。
- 别用
npm install bootstrap后在main.js里import 'bootstrap/dist/js/bootstrap'—— 这会导致初始化失败且控制台静默报错 - 纯 CSS 功能（栅格、按钮、表单样式）可以安全引入：
import 'bootstrap/dist/css/bootstrap.min.css' - JS 组件必须换为官方推荐的 Vue 封装方案，比如
bootstrap-vue-3（注意不是旧版bootstrap-vue）或更轻量的vue-bootstrap-5
用 bootstrap-vue-3 替代原生 Bootstrap JS
这是目前 Vue 3 + Bootstrap 5 最稳妥的组合，它把 Modal、Dropdown、Tooltip 全部重写为 Composition API 友好组件，不碰 DOM 直接操作，也不依赖 document.querySelector。
- 安装命令是：
npm install bootstrap-vue-3（不是bootstrap-vue，后者只支持 Vue 2） - 在
main.js中注册插件：app.use(BootstrapVue3)，别漏掉import { BootstrapVue3 } from 'bootstrap-vue-3' - 组件名前缀统一为
B*，比如<BButton>、<BDropdown>，和原生 Bootstrap HTML 写法不兼容，不能混用data-bs-toggle属性 - 如果项目已用
Pinia或Vue Router，无需额外配置 ——bootstrap-vue-3默认兼容它们的生命周期
想保留原生 Bootstrap HTML 写法？试试 vue-bootstrap-5
如果你团队习惯写 <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#mymodal"> 这类结构，又不想改模板，vue-bootstrap-5 是更贴近原生的替代品。
- 它不提供新组件，而是把 Bootstrap 5 的 JS 初始化逻辑桥接到 Vue 的
mounted/unmounted钩子中 - 需手动调用
initBootstrap()（在main.js），然后在组件中用ref绑定元素，再通过useBootstrapModal(ref)等组合式函数激活功能 - 性能略低：每个用到 tooltip/modal 的组件都要单独初始化，大量组件时可能有微小延迟
- 不支持 SSR 场景 ——
document在服务端不存在，首次渲染会跳过 JS 行为
全局样式冲突和变量覆盖怎么处理
Bootstrap 的 body 默认 margin、button 的 user-select、form-control 的 box-sizing 容易和你自己的 CSS 冲突，尤其当你用了 Tailwind 或自定义 reset。
- 别删
bootstrap-reboot.css—— 它负责基础重置，删了反而更乱；改用@import顺序控制优先级：你的 reset.css → bootstrap-reboot → bootstrap-grid → 你的 custom.css - 想改主题色？不要覆盖
$primary后重新编译 CSS，直接在scss文件里@use 'bootstrap/scss/functions'+@use 'bootstrap/scss/variables' with ( $primary: #42b883 ) - Vue 单文件组件中局部覆盖无效：Bootstrap 的 CSS 是全局作用域，
<style scoped>拦不住它；必须用:deep(.btn)或提升到全局样式块
