入门

使用 BootstrapVue 入门，它基于全球最流行的框架 - Bootstrap v4，用于使用 Vue.js 构建响应式、移动优先的网站。

Vue.js v2.6 是必需的，推荐 v2.6.12
Bootstrap v4.3.1 是必需的，推荐 v4.6.1
Popper.js v1.16 是下拉菜单（和基于下拉菜单的组件）、工具提示和弹出框所必需的。推荐使用 v1.16.1
PortalVue v2.1 是 Toasts 所必需的，推荐使用 v2.1.7
jQuery 不是必需的

查看 BootstrapVue 版本 v2.23.0 中的新增内容。

如果您要从之前的 v2.0.0-rc.## 版本迁移，请参阅 v2.0.0 迁移指南。

文档部分

在线文档包括

组件 - 组件和组件插件文档
指令 - 指令和指令插件文档
图标 - 图标和图标插件文档 v2.2.0+
参考 - 参考信息和文档
游乐场 - 在线游乐场
主题 - 主题和仪表盘

先决条件

本 BootstrapVue 文档假定您熟悉 Vue 和 Bootstrap v4 CSS。以下是这些内容的良好起点

Vue 指南
Vue API
Bootstrap v4.6 文档
Vue 加载器作用域 CSS，如果在 SFC（单文件组件）.vue 文件中使用作用域样式

文档信息

在 BootstrapVue 文档中显示的许多示例中，您可能会看到使用 CSS 类，例如 ml-2、py-1 等。这些是 Bootstrap v4.6 实用程序类，有助于控制填充、边距、定位等。您可以在实用程序类参考部分中找到有关这些类的信息。

本文档中的许多示例都是实时的，可以进行现场编辑，以增强学习体验（请注意，某些示例可能无法在 IE 11 中使用，因为在 <template> 部分中使用了 ES6 JavaScript 代码）。

BootstrapVue 还提供了一个交互式游乐场，您可以在其中试验各种组件，并将结果导出到 JSFiddle、CodePen 和/或 CodeSandbox。

重要的 HTML 全局变量

Bootstrap v4 CSS 采用了一些重要的全局样式和设置，在使用时您需要了解这些样式和设置，所有这些几乎都专门用于规范跨浏览器样式。有关详细信息，请参阅以下小节。

HTML5 doctype

Bootstrap 要求使用 HTML5 doctype。如果没有它，您可能会看到一些奇怪的不完整样式。

<!doctype html>
<html lang="en">
  ...
</html>

响应式元标记

Bootstrap 首先针对移动设备进行了优化，然后根据需要使用 CSS 媒体查询对组件进行扩展。为了确保所有设备都能正确呈现和进行触控缩放，将响应式视口元标记添加到 <head> 中。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

CSS box-sizing

为了在 CSS 中实现更直接的调整大小，全局 box-sizing 值从 content-box 切换到 border-box。这确保了 padding 不会影响元素最终计算出的宽度，但它可能会导致某些第三方软件（如 Google 地图和 Google 自定义搜索引擎）出现问题。

在极少数需要覆盖它的情况下，请使用以下内容

.selector-for-some-widget {
  box-sizing: content-box;
}

使用上述代码段，嵌套元素（包括通过 ::before 和 ::after 生成的内容）都将继承为 .selector-for-some-widget 指定的 box-sizing。

在 CSS Tricks 上了解有关框模型和调整大小的更多信息。

样式重启

为了改善跨浏览器渲染，Bootstrap v4.6 使用 Reboot 来纠正浏览器和设备之间的不一致，同时为常见的 HTML 元素提供略微更主观的重置。

使用模块打包器

您很可能正在使用模块打包器，例如 Webpack、Parcel 或 rollup.js，这使得直接将包包含到您的项目中变得很容易。为此，请使用 npm 或 yarn 获取最新版本的 Vue.js、Bootstrap v4 和 BootstrapVue

# With npm
npm install vue bootstrap bootstrap-vue

# With yarn
yarn add vue bootstrap bootstrap-vue

然后，在您的应用入口点（通常为 app.js 或 main.js）中注册 BootstrapVue

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

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

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

主题化 Bootstrap

如果您想更改 Bootstrap 的默认样式（例如 $body-color），则必须使用 Bootstrap 和 BootstrapVue 的 scss 文件。

创建您自己的 scss 文件（例如 app.scss），其中包含您的自定义定义和末尾的 2 个 @import

// Define variable defaults
$body-bg: #000;
$body-color: #111;

// Then import Bootstrap and BootstrapVue SCSS files (order is important)
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

然后将该单个 scss 文件导入到您的项目中

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

不要将各个 SCSS 文件单独导入到您的项目中，因为变量和函数将无法在文件之间共享。

有关主题化 Bootstrap 的信息，请查看主题化参考部分。

别名 Vue 导入

BootstrapVue 和 PortalVue 需要访问全局 Vue 引用（通过 import Vue from 'vue'）。

如果您正在使用特定版本的 Vue（例如，仅运行时与编译器 + 运行时），您需要在捆绑器配置中为 'vue' 设置别名，以确保您的项目、BootstrapVue 和 PortalVue 都使用相同的 Vue 构建版本。如果您看到诸如 "$attr 和 $listeners 是只读的" 或 "检测到多个 Vue 实例" 的错误，那么您需要设置别名。

示例：Vue CLI 中的 Vue 别名，位于 vue.config.js

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      // If using the runtime only build
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      // Or if using full build of Vue (runtime + compiler)
      // path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js')
    )
  }
}

示例：webpack.config.js 中的 Vue 别名

module.exports = {
  // ...
  resolve: {
    alias: {
      // If using the runtime only build
      vue$: 'vue/dist/vue.runtime.esm.js' // 'vue/dist/vue.runtime.common.js' for webpack 1
      // Or if using full build of Vue (runtime + compiler)
      // vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

注意：如果您的项目有多个 webpack 配置文件（例如，webpack.config.js、webpack.renderer.config.js、webpack.vendor.config.js、webpack.server.config.js、webpack.client.config.js 等），您需要在所有文件中设置适当的别名。

请参阅 Vue.js 指南，了解有关为 webpack、rollup.js、Parcel 等设置别名的完整详细信息。

高级模块捆绑器用法

从 scss 文件导入时，Webpack 和 Parcel 支持用波形符路径 (~) 为 scss 模块添加前缀

// Webpack example
@import '~bootstrap';
@import '~bootstrap-vue';

// Parcel example
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

有关如何配置资产加载以及如何解析模块的更多详细信息，请参阅模块捆绑器文档。

备注:

Webpack 配置用于加载 CSS 文件（官方指南）
SASS/SCSS 文件的 Webpack 加载器（官方指南）
Parcel CSS（官方指南）
Parcel SCSS (官方指南)

使用模块打包器进行摇树优化

使用模块打包器时，可以选择仅导入特定组件组（插件）、组件和/或指令。请注意，摇树优化仅适用于 JavaScript 代码，不适用于 CSS/SCSS。

注意：最佳摇树优化仅在 webpack 4 处于 production 模式且启用了 javascript 压缩时才有效。

组件组和指令作为 Vue 插件

可以通过从 bootstrap-vue 导入，将组件组和指令作为 Vue 插件导入

// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)

// This imports <b-modal> as well as the v-b-modal directive as a plugin:
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)

// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)

// This imports directive v-b-scrollspy as a plugin:
import { VBScrollspyPlugin } from 'bootstrap-vue'
Vue.use(VBScrollspyPlugin)

// This imports the dropdown and table plugins
import { DropdownPlugin, TablePlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)
Vue.use(TablePlugin)

作为插件导入时，在大多数情况下都会导入所有子组件和相关指令。即，导入 <b-nav> 时，还将包含所有 <nav-*> 子组件，以及所有下拉子组件。组件简写别名（如果有）也会包含在插件中。有关详细信息，请参阅组件和指令文档。

还有两个用于提供 $bvModal 和 $bvToast 注入的辅助插件（如果您不使用 ModalPlugin 或 ToastPlugin 插件），可从 'bootstrap-vue' 导入

BVModalPlugin - 提供用于生成消息框的注入 $bvModal。
BVToastPlugin - 提供用于生成按需吐司的注入 $bvToast。

导入多个组件组和/或指令组插件时，将所有导入包含在一个 import 语句中，以实现最佳摇树优化。

单个组件和指令

如果您只想提取特定组件或一组组件，可以通过直接导入这些组件来实现。

要挑选一个组件/指令，首先在使用它的文件中导入它

// Place all imports from 'bootstrap-vue' in a single import
// statement for optimal bundle sizes
import { BModal, VBModal } from 'bootstrap-vue'

然后将其添加到组件定义中

Vue.component('MyComponent', {
  components: { BModal },
  // Note that Vue automatically prefixes directive names with `v-`
  directives: { 'b-modal': VBModal }
  // ...
})

或全局注册它们

Vue.component('BModal', BModal)
// Note that Vue automatically prefixes directive names with `v-`
Vue.directive('b-modal', VBModal)

Vue 允许在此处使用各种组件和指令名称语法，因此请随意使用 kebab-casing（已显示）、camelCasing、PascalCasing 和/或对象属性简写（仅限组件）。

使用 BootstrapVue 源代码以获得更小的捆绑包

在使用模块捆绑器时，它们通常会默认使用 esm/ 模块化构建，该构建已由 Babel 为我们的受支持的浏览器预先转换。

你可以通过将 'bootstrap-vue' 的别名设置为使用 BootstrapVue 源文件，并在模块捆绑器配置中将 node_modules/bootstrap-vue/src/* 列入白名单以供构建过程转换，来覆盖 esm/ 构建的使用。这将允许你为目标浏览器/环境转换 BootstrapVue，并可能减小捆绑包大小（并且只会包含一次 babel 帮助器实用工具），但代价是构建时间会稍微延长。

用于 Babel 转换的 webpack.config.js 示例

module.exports = {
  resolve: {
    alias: {
      // Alias for using source of BootstrapVue
      'bootstrap-vue$': 'bootstrap-vue/src/index.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // Exclude transpiling `node_modules`, except `bootstrap-vue/src`
        exclude: /node_modules\/(?!bootstrap-vue\/src\/)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
}

你可能需要安装 babel-core、babel-loader 和 babel-preset-env

# If using npm
npm install babel-core babel-loader babel-preset-env --save-dev

# If using yarn
yarn add babel-core babel-loader babel-preset-env --dev

有关更多详细信息，请参见

Nuxt.js 模块

BootstrapVue 提供了一个 Nuxt.js 模块，用于轻松地将 BootstrapVue（或 BootstrapVue 的部分内容）导入到你的 Nuxt.js 应用程序中。

Nuxt.js 入门

建议使用 Nuxt.js 版本 2.15.8（或更高版本）。

安装依赖项

# With npm
npm install bootstrap-vue

# With yarn
yarn add bootstrap-vue

将 bootstrap-vue/nuxt 添加到你的 nuxt.config.js 文件的 modules 部分。

这将包括 bootstrap.css 和 bootstrap-vue.css 默认预编译 CSS。

module.exports = {
  modules: ['bootstrap-vue/nuxt']
}

请注意，这不会安装图标组件。如需了解如何通过 Nuxt.js 模块包含图标，请参阅下方的图标部分。

使用自定义 Bootstrap SCSS

如果您使用自定义 Bootstrap SCSS，可以通过将以下选项设置为 false 来禁用自动包含 Bootstrap 和 BootstrapVue 预编译的 CSS 文件

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false // Or `bvCSS: false`
  }
}

BootstrapVue 的自定义 SCSS 依赖于 Bootstrap SCSS 变量和混合，以及您可能设置的任何变量覆盖。您可以在项目的自定义 SCSS 文件中包含 Bootstrap 和 BootstrapVue SCSS

// Custom Bootstrap variable overrides go first
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 640px,
  lg: 992px,
  xl: 1300px
);
$enable-rounded: false;

// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

// And define any of your custom or additional CSS/SCSS here,
// or via an @import

在应用主入口点中包含单个自定义 SCSS 文件（在使用 sass-loader 时）

import 'custom.scss'

`transformAssetUrls` 与 Nuxt.js

BootstrapVue Nuxt 插件模块将自动添加 BootstrapVue 特定的 transformAssetUrls 图像 src 属性配置。

Nuxt.js 的 Tree Shaking

如果您希望减小生产包的大小，因为您只使用可用 BootstrapVue 插件的子集，您可以配置 BootstrapVue componentPlugins 或 directivePlugins 的列表，您希望在 Nuxt.js 项目中全局安装。请注意，Tree Shaking 仅适用于 JavaScript 代码，不适用于 CSS/SCSS。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    componentPlugins: [
      'LayoutPlugin',
      'FormPlugin',
      'FormCheckboxPlugin',
      'FormInputPlugin',
      'FormRadioPlugin',
      'ToastPlugin',
      'ModalPlugin'
    ],
    directivePlugins: ['VBPopoverPlugin', 'VBTooltipPlugin', 'VBScrollspyPlugin']
  }
}

还有两个额外的帮助程序插件用于提供 $bvModal 和 $bvToast 注入（如果您不使用 ModalPlugin 或 ToastPlugin 插件），它们在 componentPlugins 选项中可用

BVModalPlugin - 提供用于生成消息框的注入 $bvModal。
BVToastPlugin - 提供用于生成按需吐司的注入 $bvToast。

您还可以选择导入各个组件和/或指令，方法是配置 BootstrapVue components 或 directives 的列表，您希望在 Nuxt.js 项目中全局安装。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    components: ['BContainer', 'BRow', 'BCol', 'BFormInput', 'BButton', 'BTable', 'BModal'],
    directives: ['VBModal', 'VBPopover', 'VBTooltip', 'VBScrollspy']
  }
}

您可以随意混合和匹配插件导入与各个组件和指令导入。

有关可用的插件名称（以及每个插件中包含哪些组件和指令）以及组件和/或指令导入名称的详细信息，请参阅每个组件和指令文档底部的参考部分。

请注意，在导入单个组件时，任何组件别名都不可用。

注意：只有当 Nuxt.js 应用程序处于 production 模式时，才能实现最佳的 tree shaking。在不处于 production 模式（即 dev 模式）时，您可能会注意到更大的捆绑包大小。

如果您想将各个 BootstrapVue 组件导入到 Nuxt 应用程序的特定页面和/或组件中，您可能希望绕过 Nuxt.js 模块，而遵循上面的模块捆绑器和使用模块捆绑器进行 Tree shaking 部分。或者，您可能只想在 Nuxt.js 模块配置中导入几个插件（例如 LayoutPlugin），然后在需要时在页面中导入其他组件或插件。

图标

使用 Nuxt.js 模块时，图标插件不会自动安装。您必须显式启用 IconsPlugin，或指定要导入的图标组件。

所有图标

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Install the `IconsPlugin` plugin (in addition to `BootstrapVue` plugin)
    icons: true
  }
}

特定图标

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Add the desired icon components to the `components` array
    components: ['BIcon', 'BIconAlertFill', 'BIconCalendar', 'BIconGears']
  }
}

图标插件

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Add the icon plugin to the `componentsPlugins` array
    componentPlugins: ['IconsPlugin']
  }
}

使用 Nuxt.js 传递自定义 BootstrapVue 配置

如果您需要传递自定义 BootstrapVue 配置，可以通过在 nuxt.config.js 中设置 config 属性来实现。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    config: {
      // Custom config options here
    }
  }
}

为 Nuxt.js 使用 BootstrapVue 的预编译版本

Nuxt.js 模块使用 BootstrapVue 的预编译版本以加快开发构建速度，并使用 BootstrapVue 的源代码 (src/) 以获得更高质量和更小的生产构建。

您可以使用 usePretranspiled 选项覆盖此选项。将其设置为 true 时始终使用预编译版本，而将其设置为 false 时始终使用 src/。默认情况下，usePretranspiled 仅在开发模式下启用。您无需使用此选项，因为默认设置最适合性能。

Vue CLI 3

与 V2 不同，Vue CLI 3 不使用模板。

在目录 my-project 中创建一个新项目

npx @vue/cli create my-project

进入 my-project 目录并安装 bootstrap-vue

npm install bootstrap-vue

在幕后，Vue CLI 使用 webpack，因此我们可以按照 webpack 说明注册 BootstrapVue 插件。

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

有关使用项目相对路径作为各种 BootstrapVue 组件上 image src 属性的 Vue CLI 3 的其他配置，请参阅 Image Src Resolving 参考页面的 Vue CLI 3 部分。

Vue CLI 3 插件

或者，你可以使用 Bootstrap-Vue Vue CLI 3 插件来帮助你配置你的应用。

vue create my-app
cd my-app
vue add bootstrap-vue

这将创建一个带有基本 BootstrapVue 设置的新应用，以启动你的项目。

将来此插件将提供更多高级配置和模板的选项。

对于图标支持，你可能需要编辑结果的配置文件。

浏览器

如果不使用模块打包器或编译过程，你可以改为在 HTML <head> 部分添加 Bootstrap 和 BootstrapVue CSS URL，后跟必需的 JavaScript 文件。

在支持较旧浏览器时（请参见下面的浏览器支持），你需要在加载 Vue 和 BootstrapVue JavaScript 文件之前包含一个用于处理现代 JavaScript 特性的 polyfill。

<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

构建变体

为你的构建环境/打包器选择最佳变体有助于减小包大小。如果你的打包器支持 esm 模块，它会自动优先于 commonjs。

变体	环境	Tree Shake	包路径
ESM 模块	webpack 2+ / rollup.js	是	`esm/index.js`
ESM 捆绑包	webpack 2+ / rollup.js	是	`dist/bootstrap-vue.esm.js`
commonjs2	webpack 1 / ...	否	`dist/bootstrap-vue.common.js` 或 `dist/bootstrap-vue.common.min.js`
UMD	浏览器	否	`dist/bootstrap-vue.js` 或 `dist/bootstrap-vue.min.js`

请注意，UMD（浏览器）变体不包括 BootstrapVue 图标支持。上面列出的所有其他变体都包含 BootstrapVueIcons (IconsPlugin) 插件（请注意，图标插件不会自动安装，必须通过 Vue.use() 显式安装。有关更多详细信息，请参阅图标用法部分。

仅图标模块

变体	环境	Tree Shake	包路径
ESM 捆绑包	webpack 2+ / rollup.js	是	`dist/bootstrap-vue-icons.esm.js`
commonjs2	webpack 1 / ...	否	`dist/bootstrap-vue-icons.common.js` 或 `dist/bootstrap-vue-icons.common.min.js`
UMD	浏览器	否	`dist/bootstrap-vue-icons.js` 或 `dist/bootstrap-vue-icons.min.js`

ESM 模块构建和 ESM 捆绑包（单个文件）是可摇树的，但是使用 ESM 模块相对于 ESM 捆绑包时，最终的捆绑包大小会更小。

上面列出的所有构建变体都已针对浏览器预先转换，这些浏览器受 BootstrapVue 支持。但是，如果您仅针对现代浏览器，则可能需要从 src/index.js 导入 BootstrapVue，（通过将 bootstrap-vue 别名为 bootstrap-vue/src/index.js）并将 bootstrap-vue/src 列入白名单，以便通过您自己的项目进行转换。这可能会减小最终项目捆绑包的大小。有关更多详细信息，请参阅上面的使用 BootstrapVue 源代码以获得更小的捆绑包部分。

依赖项

BootstrapVue 依赖于 Popper.js（用于 Tooltip、Popover 和 Dropdown 定位）、PortalVue（用于 toast）和 vue-functional-data-merge（由我们的功能组件使用）。这三个依赖项包含在 BootstrapVue UMD 捆绑包中，而 UMD（浏览器）仅图标捆绑包包含 vue-functional-data-merge。所有其他构建不包括这些依赖项。

迁移已使用 Bootstrap 的项目

如果您已经使用 Bootstrap v4，则可能需要对项目进行一些调整

从页面脚本或构建管道中移除 bootstrap.js 文件
如果 Bootstrap 是唯一依赖 jQuery 的内容，则可以安全地将其移除 — BootstrapVue 不依赖 jQuery
将本机 Bootstrap HTML 标记转换为简化的 BootstrapVue 自定义组件标记
首先仅转换需要 Bootstrap javascript 的交互式控件。

浏览器支持

CSS

BootstrapVue 要与 Bootstrap v4.6 CSS/SCSS 配合使用。有关 Bootstrap v4 当前支持的浏览器详细信息，请参阅浏览器和设备。

JS

BootstrapVue 使用 Vue.js 编写！因此，由您的项目和捆绑器决定支持哪些浏览器。

BootstrapVue 使用以下功能和 API

ES6（例如 Array.from()、Array.isArray()、Object.assign()、Object.is() 等）
Promise
MutationObserver
IntersectionObserver（可选）

如果您想支持较旧的 IE、Android 和 iOS 设备网络浏览器，则可能需要使用 core-js 和 intersection-observer

npm install core-js regenerator-runtime intersection-observer

然后在您的应用主入口点导入 polyfill

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer' // Optional
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

如果使用已弃用的 @babel/polyfill

npm install @babel/polyfill intersection-observer