如何在Nuxt项目中完全卸载BootstrapVue并安装原生Bootstrap？

DevOps 小满

2026-10-7

卸载Bootstrap-vue的错误修正

你写的卸载第一步命令npm i bootstrap-vue --save是安装指令，正确卸载指令为：
```
npm uninstall bootstrap-vue --save
```
你当前提交的nuxt.config.js中仍保留了plugins: ["@/plugins/bootstrap-vue"]配置，需要删除该行
你还没有删除plugins/bootstrap-vue.js文件，请手动删除
清理残留依赖：删除项目根目录下的node_modules文件夹和package-lock.json文件，重新执行npm install，确保依赖完全清理

原生Bootstrap配置错误修正

你添加的jQuery、Bootstrap JS/CSS的CDN配置全部被注释，没有实际生效，取消对应的注释即可正常加载
更推荐使用Bootstrap 5版本，不需要依赖jQuery，可避免jQuery和Vue响应式逻辑的冲突，适配性更好

模态框代码错误修正

原生Bootstrap的下拉菜单默认是隐藏状态，必须搭配触发按钮才能正常显示，你只写了.dropdown-menu容器，缺少触发元素和外层.dropdown容器，参考正确结构：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    下拉按钮
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>