bootstrap-vue3

何时使用此技能

在用户希望执行以下操作时，使用此技能：

• 使用 Bootstrap Vue 组件构建 Vue 3 应用
• 使用 Bootstrap UI 组件（Button、Form、Table、Modal 等）
• 使用 Bootstrap 栅格创建响应式布局
• 使用 Bootstrap Vue 指令（v-b-tooltip、v-b-popover、v-b-modal）
• 使用 Bootstrap 样式实现表单
• 在 Bootstrap 表格中显示数据
• 创建模态框和警告框
• 使用 Bootstrap 导航组件
• 自定义 Bootstrap 主题
• 从 Bootstrap Vue 2.x 迁移到 3.0

如何使用此技能

此技能的组织结构与 Bootstrap Vue 3.0 官方文档结构一致（https://bootstrap-vue.org/docs、https://bootstrap-vue.org/docs/components）。使用 Bootstrap Vue 3.0 时：

1. 根据用户请求确定主题：

   • Getting started/快速开始 → examples/getting-started/installation.md 或 examples/getting-started/basic-usage.md
   • Button/按钮 → examples/components/button.md
   • Form/表单 → examples/components/form.md
   • Table/表格 → examples/components/table.md
   • Modal/模态框 → examples/components/modal.md
   • Alert/警告框 → examples/components/alert.md
   • Navbar/导航栏 → examples/components/navbar.md
   • Grid/栅格 → examples/components/grid.md
   • Directives/指令 → examples/directives/tooltip.md 或 examples/directives/modal.md

2. 从 examples/ 目录加载相应的示例文件：

   入门（快速开始）- examples/getting-started/：

   • examples/getting-started/installation.md - 安装 Bootstrap Vue 并进行基本设置
   • examples/getting-started/basic-usage.md - 基本组件用法

   组件 - examples/components/：

   • examples/components/button.md - Button 组件
   • examples/components/form.md - Form 组件
   • examples/components/input.md - Input 组件
   • examples/components/table.md - Table 组件
   • examples/components/modal.md - Modal 组件
   • examples/components/alert.md - Alert 组件
   • examples/components/navbar.md - Navbar 组件
   • examples/components/grid.md - 栅格系统（Container、Row、Col）
   • examples/components/card.md - Card 组件
   • examples/components/badge.md - Badge 组件
   • examples/components/dropdown.md - Dropdown 组件
   • examples/components/pagination.md - Pagination 组件
   • examples/components/tabs.md - Tabs 组件
   • examples/components/collapse.md - Collapse 组件
   • examples/components/popover.md - Popover 组件
   • examples/components/tooltip.md - Tooltip 组件

   指令 - examples/directives/：

   • examples/directives/tooltip.md - v-b-tooltip 指令
   • examples/directives/popover.md - v-b-popover 指令
   • examples/directives/modal.md - v-b-modal 指令
   • examples/directives/toggle.md - v-b-toggle 指令

   高级用法 - examples/advanced/：

   • examples/advanced/theme-customization.md - 自定义 Bootstrap 主题
   • examples/advanced/composables.md - 使用组合式函数（useToast、useModal）

3. 遵循相应示例文件中的说明，了解语法、结构和最佳实践

   重要说明：

   • 所有示例均遵循 Bootstrap Vue 3.0 API（Vue 3 + Bootstrap 5）
   • 示例使用 Composition API 语法
   • 每个示例文件都包含核心概念、代码示例和要点
   • 务必查看示例文件，了解最佳实践和常见模式

4. 需要时参考 api/ 目录中的 API 文档：

   • api/components.md - 组件 API 参考
   • api/directives.md - 指令 API 参考
   • api/composables.md - 组合式函数 API 参考

5. 使用 templates/ 目录中的模板：

   • templates/project-setup.md - 项目设置模板
   • templates/component-template.md - 组件用法模板

文档映射（与官方文档一一对应）

指南（指南）：

• 查看 examples/guide/ 或 examples/getting-started/ 中的指南文件 → https://bootstrap-vue.org/docs

组件（组件）：

• 查看 examples/components/ 中的组件文件 → https://bootstrap-vue.org/docs/components

示例和模板

此技能包含详细示例，按照官方文档结构组织。所有示例都位于 examples/ 目录中（见上方映射）。

使用示例：

• 根据用户的请求确定主题
• 从上方映射中加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据具体用例调整代码示例

使用模板：

• 查看 templates/ 目录中的模板，了解常见的脚手架结构
• 根据具体需求和编码风格调整模板

API 参考

详细的 API 文档位于 api/ 目录中，按照官方 Bootstrap Vue 3.0 API 文档结构组织：

组件 API（api/components.md）

• 所有组件属性和 API
• 组件事件和插槽
• 组件类型和接口

指令 API（api/directives.md）

• 指令语法和用法
• 指令修饰符
• 指令选项

组合式函数 API（api/composables.md）

• useToast 组合式函数
• useModal 组合式函数
• usePopover 组合式函数

使用 API 参考：

1. 确定需要了解的 API
2. 从 api/ 目录加载相应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接中的示例文件，了解详细用法
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 导入 Bootstrap CSS：在入口文件中导入 Bootstrap CSS
2. 使用 Composition API：Vue 3 项目优先使用 Composition API
3. 摇树优化：单独导入组件，以获得更好的摇树优化效果
4. 响应式设计：使用 Bootstrap 栅格系统构建响应式布局
5. 无障碍性：遵循 Bootstrap 无障碍指南
6. 主题自定义：使用 Bootstrap 变量，确保主题风格一致
7. 指令：使用指令以编程方式控制组件
8. 组合式函数：使用组合式函数以编程方式访问 API
9. 组件组合：组合组件以构建复杂 UI
10. 性能：通过摇树优化来优化打包体积

资源

• 官方网站：https://bootstrap-vue.org
• 文档：https://bootstrap-vue.org/docs
• 组件：https://bootstrap-vue.org/docs/components
• GitHub 仓库：https://github.com/bootstrap-vue/bootstrap-vue-next

关键词

Bootstrap Vue, Bootstrap Vue 3.0, Vue 3, Bootstrap 5, 组件, Button, Form, Table, Modal, Alert, Navbar, Grid, 指令, v-b-tooltip, v-b-popover, v-b-modal, 组合式函数, useToast, useModal, 组件库, 按钮, 表单, 表格, 模态框, 警告框, 导航栏, 栅格, 指令