如何Vue2项目中引入BootStrap5

在 Vue2 项目中引入 Bootstrap5，你需要遵循以下步骤：

1. **安装依赖**:
使用 npm 或者 yarn 来添加 Bootstrap 和相关的 CSS 文件。打开终端或命令行，切换到你的项目目录，然后运行：

   npm install bootstrap@5 vite-plugin-bootstrap --save
   或
   yarn add bootstrap@5 vite-plugin-bootstrap --save

2. **配置 Vite**:
在 `vite.config.js` 文件中，添加 Bootstrap 的插件，以便在构建过程中处理 Bootstrap 的 CSS 和 JS 资源。例如：

   import { defineConfig } from 'vite';
   import bootstrap from 'vite-plugin-bootstrap';

   export default defineConfig({
     plugins: [bootstrap({ css: true })],
     build: {
       postcss: {
         plugins: [
           require('postcss-preset-env')({
             autoprefixer: {
               browsers: ['last 2 versions', 'Chrome >= 90'],
             },
           }),
         ],
       },
     },
   });

3. **引用样式**:
在 `src/main.css` 或其他全局 CSS 文件中导入 Bootstrap 主题文件：

   @import "node_modules/bootstrap/dist/css/bootstrap.min.css";

4. **使用组件**:
在 Vue 组件中，可以直接使用 Bootstrap 的预定义组件，比如 `<button>`、`<navbar>` 等。Bootstrap 的组件通常不需要额外的导入，因为它们已经包含在 CSS 中。

现在你应该可以在 Vue2 项目中看到和使用 Bootstrap5 的组件了。