vue3 vite 使用 bootstrap

### 集成Bootstrap到Vue 3和Vite项目

#### 创建SCSS文件
为了在Vue 3与Vite构建的项目里使用Bootstrap，可以在`assets`目录下建立名为`styles.scss`的文件来集中管理样式表引入。具体操作如下：

// 导入全部Bootstrap CSS
@import "bootstrap/scss/bootstrap";
// 引入图标支持
@import 'bootstrap-icons/font/bootstrap-icons.css';

上述配置确保了整个应用程序能够访问Bootstrap所提供的CSS类以及图标资源[^1]。

#### 修改入口文件
接着，在项目的入口文件即`main.ts`或`main.js`内加入必要的脚本和样式引用语句以便全局生效：

// 引入自定义样式文件
import '/src/assets/styles.scss'
// 加载Popper库，这是Bootstrap某些组件所依赖的基础工具包
import "@popperjs/core"
// 完整加载Bootstrap JavaScript插件集合
import "bootstrap"

这段代码片段的作用在于初始化所需的JavaScript功能模块，并使它们在整个应用范围内可用。

对于那些只需要部分特性的场景，则可以选择性地单独加载特定组件而非整体打包所有JS逻辑：

// 按需引入单个Bootstrap JS组件实例
import Alert from 'bootstrap/js/dist/alert';
import { Tooltip, Toast, Popover } from 'bootstrap';

这样做不仅有助于减少最终部署包体积，还能加快页面加载速度。

#### 使用示例
完成以上设置之后便可以直接利用Bootstrap提供的HTML结构标签配合相应的class属性快速搭建界面布局；同时也可以借助其预设好的API接口轻松调用交互特效等功能特性。

例如要显示警告框只需简单编写如下模板代码即可实现预期效果：

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip!">Hover me</button>