Vue项目如何仅引入使用BootstrapVue的Bootstrap栅格系统

你现有代码存在两个问题：

• 混用Vue2/Vue3 API：import Vue from 'vue'、全量导入BootstrapVue是Vue2版本bootstrap-vue的写法，在你用createApp的Vue3项目里无法正常运行
• 全量注册组件会把所有bootstrap-vue组件打包进产物，不符合仅使用栅格的需求

具体实现步骤 #

1. 安装最小依赖 #

栅格系统只需要两个必要依赖，不需要安装全量组件包：

• bootstrap核心包：提供栅格基础样式
• 对应Vue版本的bootstrap-vue核心包：提供栅格封装组件

安装命令：

# npm 安装
npm install bootstrap @bootstrap-vue-next/core
# yarn 安装
yarn add bootstrap @bootstrap-vue-next/core
# pnpm 安装
pnpm add bootstrap @bootstrap-vue-next/core

如果你是Vue2项目，把@bootstrap-vue-next/core替换为bootstrap-vue即可，后续引入逻辑完全一致。

2. 入口文件按需引入 #

栅格系统仅用到三个组件：容器BContainer、行BRow、列BCol，同时bootstrap提供了单独的栅格样式文件，不需要引入全量bootstrap样式。
把你的入口文件代码替换为以下内容：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 仅引入bootstrap栅格专用样式，无其他组件样式
import 'bootstrap/dist/css/bootstrap-grid.min.css'
// 仅导入栅格相关组件，不导入全量组件库
import { BContainer, BRow, BCol } from '@bootstrap-vue-next/core'

const app = createApp(App)
// 单独注册三个栅格组件
app.component('BContainer', BContainer)
app.component('BRow', BRow)
app.component('BCol', BCol)

app.use(router).mount('#app')

3. 组件内使用 #

注册完成后就可以直接在页面里用栅格布局，所有原生bootstrap栅格的响应式规则、偏移、对齐能力都正常支持：

<template>
  <BContainer>
    <BRow class="g-4">
      <BCol cols="12" md="6" lg="3">栅格单元1</BCol>
      <BCol cols="12" md="6" lg="3">栅格单元2</BCol>
      <BCol cols="12" md="6" lg="3">栅格单元3</BCol>
      <BCol cols="12" md="6" lg="3">栅格单元4</BCol>
    </BRow>
  </BContainer>
</template>

效果说明 #

• 最终打包产物仅包含栅格相关的代码和样式，不会引入表单、按钮、弹窗等其他无关组件，产物体积最小
• 栅格功能和全量引入bootstrap-vue完全一致，没有能力缺失

内容的提问来源于stack exchange，提问作者user18083680