<span style="color:#383a42"><span style="color:#a0a1a7"><em># With npm</em></span>
npm i vue bootstrap-vue bootstrap

<span style="color:#a0a1a7"><em># With yarn</em></span>
yarn add vue bootstrap-vue bootstrap</span>

然后，在app入口点注册BootstrapVue插件：

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>

Vue.use(BootstrapVue)</span>

并导入Bootstrap和BootstrapVue css文件：

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap/dist/css/bootstrap.css'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap-vue/dist/bootstrap-vue.css'</span></span>

或者scss通过单个自定义SCSS文件导入Bootstrap和BootstrapVue 文件：

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// custom.scss</em></span>
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'node_modules/bootstrap/scss/bootstrap'</span>;
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'node_modules/bootstrap-vue/src/index.scss'</span>;</span>

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'custom.scss'</span></span>

在包含Bootstrap SCSS（）之前，请确保@import或定义自定义变量值，并在此之后包括BootstrapVue SCSS（）以确保正确设置变量。bootstrap.scssbootstrap-vue.scss

确保将所有SCSS @import放入单个SCSS文件中，然后将该单个文件导入到项目中。默认情况下，将单个SCSS文件导入项目不会在文件之间共享变量值和函数。

注意：需要webpack配置才能加载CSS / SCSS文件（官方指南）。

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

别名Vue导入

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

如果您使用的是特定版本的Vue（即仅运行时与编译器+运行时），则需要'vue'在bundler配置中设置别名，以确保您的项目BootstrapVue和PortalVue都使用相同的构建版本Vue。如果您看到错误，例如"

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

<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#a0a1a7"><em>// ...</em></span>
  resolve: {
    <span style="color:#986801">alias</span>: {
      <span style="color:#a0a1a7"><em>// If using the runtime only build</em></span>
      vue$: <span style="color:#50a14f">'vue/dist/vue.runtime.esm.js'</span> <span style="color:#a0a1a7"><em>// 'vue/dist/vue.runtime.common.js' for webpack 1</em></span>
      <span style="color:#a0a1a7"><em>// Or if using full build of Vue (runtime + compiler)</em></span>
      <span style="color:#a0a1a7"><em>// vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1</em></span>
    }
  }
}</span>

注意：如果您的项目有多个的WebPack配置文件（即webpack.config.js， webpack.renderer.config.js，webpack.vendor.config.js，webpack.server.config.js， webpack.client.config.js，等），您将需要设置相应的别名在所有的人。

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

Nuxt.js模块

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

安装依赖项：

<span style="color:#383a42"><span style="color:#a0a1a7"><em># With npm</em></span>
npm i bootstrap-vue

<span style="color:#a0a1a7"><em># With yarn</em></span>
yarn add bootstrap-vue</span>

添加bootstrap-vue/nuxt到nuxt.config.js的模块部分。

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

<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>]
}</span>

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

<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">bootstrapCSS</span>: <span style="color:#0184bb">false</span>, <span style="color:#a0a1a7"><em>// Or `css: false`</em></span>
    bootstrapVueCSS: <span style="color:#0184bb">false</span> <span style="color:#a0a1a7"><em>// Or `bvCSS: false`</em></span>
  }
}</span>

BootstrapVue的自定义SCSS依赖于Bootstrap SCSS变量和mixins。您可以在项目的自定义SCSS文件中包含Bootstrap和BootstrapVue SCSS：

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// custom.scss</em></span>

<span style="color:#a0a1a7"><em>// Custom overrides go first</em></span>
<span style="color:#986801">$grid-breakpoints</span>: (
  xs: <span style="color:#986801">0</span>,
  sm: <span style="color:#986801">480px</span>,
  md: <span style="color:#986801">640px</span>,
  lg: <span style="color:#986801">992px</span>,
  xl: <span style="color:#986801">1300px</span>
);

<span style="color:#a0a1a7"><em>// Then include the following</em></span>
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap/scss/bootstrap.scss'</span>;
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap-vue/src/index.scss'</span>;

<span style="color:#a0a1a7"><em>// And define any of your custom overrides or additional CSS/SCSS here,</em></span>
<span style="color:#a0a1a7"><em>// or via an @import</em></span></span>

在您的应用程序主入口点包括单个自定义SCSS文件（使用时sass-loader）：

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'custom.scss'</span></span>

transformAssetUrls与Nuxt.js

v2.0.0-rc.22中的新功能BootstrapVue Nuxt插件模块将自动为您添加BootstrapVue特定的transformAssetUrls 图像src道具配置。

用Nuxt.js摇晃的树

在2.0.0-rc.20增强

如果您希望减少生产包大小，因为您只使用可用的BootstrapVue插件的子集，则可以配置BootstrapVue列表componentPlugins或者directivePlugins要在Nuxt.js项目中全局安装。

<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">componentPlugins</span>: [
      <span style="color:#50a14f">'LayoutPlugin'</span>,
      <span style="color:#50a14f">'FormPlugin'</span>,
      <span style="color:#50a14f">'FormCheckboxPlugin'</span>,
      <span style="color:#50a14f">'FormInputPlugin'</span>,
      <span style="color:#50a14f">'FormRadioPlugin'</span>,
      <span style="color:#50a14f">'ToastPlugin'</span>,
      <span style="color:#50a14f">'ModalPlugin'</span>
    ],
    <span style="color:#986801">directivePlugins</span>: [<span style="color:#50a14f">'VBPopoverPlugin'</span>, <span style="color:#50a14f">'VBTooltipPlugin'</span>, <span style="color:#50a14f">'VBScrollspyPlugin'</span>]
  }
}</span>

新的2.0.0-rc.20有用于提供两个额外的辅助插件bvModal和bvToast注射（如果你不使用 ModalPlugin或ToastPlugin插件），在可用componentPlugins的选项：

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

2.0.0-rc.20中的新增功能您还可以选择导入单个组件和/或指令，方法是配置BootstrapVue列表components或者 directives要在Nuxt.js项目中进行全局安装。

<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">components</span>: [<span style="color:#50a14f">'BContainer'</span>, <span style="color:#50a14f">'BRow'</span>, <span style="color:#50a14f">'BCol'</span>, <span style="color:#50a14f">'BFormInput'</span>, <span style="color:#50a14f">'BButton'</span>, <span style="color:#50a14f">'BTable'</span>, <span style="color:#50a14f">'BModal'</span>],
    <span style="color:#986801">directives</span>: [<span style="color:#50a14f">'VBModal'</span>, <span style="color:#50a14f">'VBPopover'</span>, <span style="color:#50a14f">'VBTooltip'</span>, <span style="color:#50a14f">'VBScrollspy'</span>]
  }
}</span>

随意将插件导入与单个组件和指令导入混合搭配。

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

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

注意：最佳树抖动仅在Nuxt.js应用程序处于production 模式时有效。不处于production模式（即 dev模式）时，您可能会注意到较大的束大小。

不要使用Nuxt模块如果要将单个BootstrapVue组件导入到 Nuxt应用程序的特定页面和/或组件中。请按照上面的模块捆绑器部分以及下面的选择性导入部分进行操作。

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

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

<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">config</span>: {
      <span style="color:#a0a1a7"><em>// Custom config options here</em></span>
    }
  }
}</span>

使用pretranspiled版本的BootstrapVue for Nuxt.js

Nuxt.js模块使用BootstrapVue的预编译版本来实现更快的开发构建，使用BootstrapVue的source（src/）来实现更高质量的生产构建。

您可以使用usePretranspiled选项覆盖此选项。设置为true始终使用预先转换的版本，而将其设置为false始终使用src/。默认情况usePretranspiled下，仅在开发模式下启用。您不应该使用此选项，因为默认值对于性能而言是最佳选择。

Vue CLI 2

DEPRECATED使用Vue CLI 3。

BootstrapVue有两个可用的Vue CLI模板：

webpack-simple：用于概念验证或小应用程序的快速脚手架
webpack：更大，生产就绪的模板，有更多选项

<span style="color:#383a42"><span style="color:#a0a1a7"><em># Ensure Vue CLI is installed and up to date</em></span>
npm i -g vue-cli

<span style="color:#a0a1a7"><em># Initialize a BootstrapVue project in the directory 'my-project'</em></span>
vue init bootstrap-vue/webpack-simple my-project

<span style="color:#a0a1a7"><em># Change into the directory</em></span>
<span style="color:#c18401">cd</span> my-project

<span style="color:#a0a1a7"><em># Install dependencies</em></span>
npm i

<span style="color:#a0a1a7"><em># Fire up the dev server with HMR</em></span>
npm run dev</span>

您可以重复上述替换命令bootstrap-vue/webpack-simple与 bootstrap-vue/webpack该模板的WebPack。

Vue CLI 3

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

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

<span style="color:#383a42">npx @vue/cli create my-project</span>

输入my-project目录并安装bootstrap-vue：

<span style="color:#383a42">npm i bootstrap-vue</span>

在引擎盖下，Vue CLI使用webpack，因此我们可以像webpack说明一样注册BootstrapVue插件。

<span style="color:#383a42"><span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>

<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap/dist/css/bootstrap.css'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap-vue/dist/bootstrap-vue.css'</span>

Vue.use(BootstrapVue)</span>

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

Vue CLI 3插件

作为替代方案，您可以使用 Bootstrap-Vue Vue CLI 3插件来帮助您配置应用程序。

<span style="color:#383a42">vue create my-app
<span style="color:#c18401">cd</span> my-app
vue add bootstrap-vue</span>

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

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

选择性组件和指令包含在模块捆绑器中

在2.0.0-rc.20中简化

使用模块捆绑器时，您可以选择仅导入特定组件组（插件），组件和/或指令。

注意：最佳树抖动仅在webpack 4处于production模式且启用了javascript缩小时才有效。

组件组和指令作为Vue插件

在2.0.0-rc.22中变化

您可以通过从componentsor directives目录导入来将组件组和指令导入为Vue插件：

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// This imports all the layout components such as <b-container>, <b-row>, <b-col>:</em></span>
<span style="color:#a626a4">import</span> { LayoutPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(LayoutPlugin)

<span style="color:#a0a1a7"><em>// This imports <b-modal> as well as the v-b-modal directive as a plugin:</em></span>
<span style="color:#a626a4">import</span> { ModalPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(ModalPlugin)

<span style="color:#a0a1a7"><em>// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:</em></span>
<span style="color:#a626a4">import</span> { CardPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(CardPlugin)

<span style="color:#a0a1a7"><em>// This imports directive v-b-scrollspy as a plugin:</em></span>
<span style="color:#a626a4">import</span> { VBScrollspyPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(VBScrollspyPlugin)</span>

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

有两个额外的辅助插件可用于提供bvModal和bvToast注入（如果您不使用ModalPlugin或ToastPlugin插件）可从以下位置导入'bootstrap-vue'：

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

个别组件和指令

在2.0.0-rc.22中变化

如果您只想引入特定组件或组件集，可以通过直接导入这些组件来完成此操作。

要挑选组件/指令，首先将其导入到正在使用它的文件中：

<span style="color:#383a42"><span style="color:#a0a1a7"><em>// Place all imports from 'bootstrap-vue' in a single import</em></span>
<span style="color:#a0a1a7"><em>// statement for optimal bundle sizes</em></span>
<span style="color:#a626a4">import</span> { BModal, VBModal } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span></span>

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

<span style="color:#383a42">Vue.component(<span style="color:#50a14f">'my-component'</span>, {
  <span style="color:#986801">components</span>: {
    <span style="color:#50a14f">'b-modal'</span>: BModal
  },
  <span style="color:#986801">directives</span>: {
    <span style="color:#a0a1a7"><em>// Note that Vue automatically prefixes directive names with `v-`</em></span>
    <span style="color:#50a14f">'b-modal'</span>: VBModal
  }
  <span style="color:#a0a1a7"><em>// ...</em></span>
})</span>

或者在全球注册：

<span style="color:#383a42">Vue.component(<span style="color:#50a14f">'b-modal'</span>, BModal)
<span style="color:#a0a1a7"><em>// Note that Vue automatically prefixes directive names with `v-`</em></span>
Vue.directive(<span style="color:#50a14f">'b-modal'</span>, VBModal)</span>

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

浏览器

在HTML <head>部分中添加Boostrap和BootstrapVue CSS URL ，然后添加所需的JavaScript文件。

在支持旧浏览器时（请参阅下面的浏览器支持），您需要在加载Vue和BoostrapVue JavaScript文件之前包含一个用于处理现代JavaScript功能的polyfill。

<span style="color:#383a42"><span style="color:#a0a1a7"><em><!-- Add this to <head> --></em></span>

<span style="color:#a0a1a7"><em><!-- Load required Bootstrap and BootstrapVue CSS --></em></span>
<<span style="color:#e45649">link</span> <span style="color:#986801">type</span>=<span style="color:#50a14f">"text/css"</span> <span style="color:#986801">rel</span>=<span style="color:#50a14f">"stylesheet"</span> <span style="color:#986801">href</span>=<span style="color:#50a14f">"//unpkg.com/bootstrap/dist/css/bootstrap.min.css"</span> />
<<span style="color:#e45649">link</span> <span style="color:#986801">type</span>=<span style="color:#50a14f">"text/css"</span> <span style="color:#986801">rel</span>=<span style="color:#50a14f">"stylesheet"</span> <span style="color:#986801">href</span>=<span style="color:#50a14f">"//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"</span> />

<span style="color:#a0a1a7"><em><!-- Load polyfills to support older browsers --></em></span>
<<span style="color:#e45649">script</span> <span style="color:#986801">src</span>=<span style="color:#50a14f">"//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver"</span> <span style="color:#986801">crossorigin</span>=<span style="color:#50a14f">"anonymous"</span>></<span style="color:#e45649">script</span>>

<span style="color:#a0a1a7"><em><!-- Load Vue followed by BootstrapVue --></em></span>
<<span style="color:#e45649">script</span> <span style="color:#986801">src</span>=<span style="color:#50a14f">"//unpkg.com/vue@latest/dist/vue.min.js"</span>></<span style="color:#e45649">script</span>>
<<span style="color:#e45649">script</span> <span style="color:#986801">src</span>=<span style="color:#50a14f">"//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"</span>></<span style="color:#e45649">script</span>></span>

构建变体

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

变种	环境	包路径
ESM模块	webpack 2+ / rollup.js	esm/index.js
ESM捆绑	webpack 2+ / rollup.js	dist/bootstrap-vue.esm.js 要么 dist/bootstrap-vue.esm.min.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
ES模块	webpack 2+ / rollup.js	es/index.js 在2.0.0-rc.22中弃用

上面列出的所有构建变体都已针对BootstrapVue支持的浏览器进行了预转换。但是，如果你的目标只是现代的浏览器，你可能要导入BootstrapVue的src/index.js，和白名单bootstrap-vue/src通过自己的项目transpilation。这可能会减少束大小。

BootstrapVue依赖于Popper.js（对于Tooltip，Popover和Dropdown定位），PortalVue （对于toast）和vue-functional-data-merge（对于功能组件）和部分core-js。这四个依赖项包含在UMD捆绑包中。

迁移已使用Bootstrap的项目

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

bootstrap.js从页面脚本或构建管道中删除该文件
如果Bootstrap是唯一依赖的东西jQuery，你可以安全地删除它 – BootstrapVue 不依赖于它jQuery
将您的本机Bootstrap HTML标记转换为简化的BootstrapVue自定义组件标记

浏览器支持

CSS

BootstrapVue将与Bootstrap v4.3 CSS / SCSS一起使用。有关Bootstrap v4当前支持的浏览器的更多信息，请参阅浏览器和设备。

JS

BootstrapVue是用Vue.js编写的！因此，您的项目和捆绑包取决于支持哪些浏览器。

BootstrapVue使用以下功能和API：

ES6（例如Array.from()，Array.isArray()，Object.assign()，Object.is()，等等）
Promise
MutationObserver

如果你想支持旧的IE，Android和iOS设备，你可能想要使用 core-js和 mutationobserver-shim：

npm install core-js regenerator-runtime mutationobserver-shim
在应用主入口点导入polyfill：

<span style="color:#383a42"><span style="color:#a626a4">import</span> <span style="color:#50a14f">'core-js/stable"'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'regenerator-runtime/runtime'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'mutationobserver-shim'</span>
<span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span></span>

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

npm install @babel/polyfill mutationobserver-shim
在应用主入口点导入polyfill：

<span style="color:#383a42"><span style="color:#a626a4">import</span> <span style="color:#50a14f">'@babel/polyfill'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'mutationobserver-shim'</span>
<span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span></span>

或者，使用Polyfill.io通过<script>HTML <head>部分中的标签动态提供特定于浏览器的polyfill 。有关示例，请参阅上面的浏览器部分。