vue3加bootstrap项目

### 创建 Vue3 和 Bootstrap 项目

为了创建一个使用 Vue3 和 Bootstrap 的项目，可以按照以下方法操作：

#### 安装 Vue CLI
如果尚未安装 Vue CLI，则可以通过 npm 进行全局安装。

npm install -g @vue/cli

#### 初始化新项目
通过 Vue CLI 创建一个新的 Vue3 项目。

vue create my-project-name

在初始化过程中选择 Vue 3 版本支持的相关选项[^1]。

#### 添加 Bootstrap-Vue 插件
对于希望集成 Bootstrap 组件库的情况，可利用 `vue add` 命令来引入 Bootstrap-Vue 支持。需要注意的是，虽然此命令默认针对 Vue2 设计，在 Vue3 中可能需要额外调整或寻找兼容版本的包。

vue add bootstrap-vue

当出现确认提示时输入 "Y"。

然而，由于官方 BootstrapVue 主要面向 Vue2 开发，对于 Vue3 用户来说推荐直接从 CDN 或者 NPM 导入最新版 Bootstrap CSS 文件以及 JavaScript 功能，并手动注册所需组件和服务。

#### 配置 main.js 文件
编辑 src/main.js 来加载必要的模块和样式表。注意这里展示的内容适用于基于 Vue2 的 BootstrapVue 设置；对于 Vue3 应适当修改以适应框架变化。

import { createApp } from 'vue'
import App from './App.vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Import the necessary components or plugins you need to use.
const app = createApp(App)

app.mount('#app')

考虑到当前环境已经转向 Vue3，建议查阅最新的文档资料获取更精确指导[^2]。

另外还有其他第三方表格组件库如 `vue-bootstrap-table` 可供选用，该项目提供了丰富的功能用于构建数据网格应用[^3]。