BootstrapVue使用入门
网站：
https://www.npmjs.com/package/bootstrap-vue
https://bootstrap-vue.js.org/docs
入门
开始使用BootstrapVue，它基于世界上最流行的框架 - Bootstrap v4，用于使用Vue.js构建响应迅速，移动优先的站点。
- Vue.js
v2.6是必需的，v2.6.10建议 - 引导
v4.3是必需的，v4.3.1建议 - PortalVue
v2.1被要求 敬酒，v2.1.5建议 - jQuery的是不要求
先决条件
在开始使用BootstrapVue之前，您应该熟悉Vue功能和Bootstrap v4.3 CSS。如果您不熟悉Vue和/或Bootstrap，那么好的起点将是：
- Vue指南
- Vue API
- Bootstrap文档
在许多BootstrapVue文档中的例子，你可能会看到使用，如CSS类 ml-2，py-1等等，这是自举V4.3实用程序类。您可以在Utility Classes参考部分中找到有关这些类的信息。
使用模块捆绑包
如果您使用的是webpack， rollup.js等模块捆绑包，您可能更愿意直接将包包含到项目中。要开始使用，请使用yarn或npm获取最新版本的Vue.js，BootstrapVue和Bootstrap v4：
# With npm
npm i vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap然后，在app入口点注册BootstrapVue插件：
// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)并导入Bootstrap和BootstrapVue css文件：
// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'或者scss通过单个自定义SCSS文件导入Bootstrap和BootstrapVue 文件：
// custom.scss
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';// app.js
import 'custom.scss'在包含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。如果您看到错误，例如"$attr and $listeners is readonly"，或 "Multiple instances of Vue detected"，则需要设置别名。
示例：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，等），您将需要设置相应的别名在所有的人。
有关 为webpack， rollup.js，Parcel等设置别名的完整详细信息，请参阅Vue.js指南。
Nuxt.js模块
2.8.1建议使用Nuxt.js版本（或更高版本）。
安装依赖项：
# With npm
npm i bootstrap-vue
# With yarn
yarn add bootstrap-vue添加bootstrap-vue/nuxt到nuxt.config.js的模块部分。
这将包括boostrap.css与bootstrap-vue.css默认预编译CSS。
module.exports = {
modules: ['bootstrap-vue/nuxt']
}如果您使用的是自定义Bootstrap SCSS，则可以通过将以下选项设置为以下来禁用自动包含Bootstrap和BootstrapVue预编译的CSS文件false：
module.exports = {
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
bootstrapCSS: false, // Or `css: false`
bootstrapVueCSS: false // Or `bvCSS: false`
}
}BootstrapVue的自定义SCSS依赖于Bootstrap SCSS变量和mixins。您可以在项目的自定义SCSS文件中包含Bootstrap和BootstrapVue SCSS：
// custom.scss
// Custom overrides go first
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 640px,
lg: 992px,
xl: 1300px
);
// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';
// And define any of your custom overrides or additional CSS/SCSS here,
// or via an @import在您的应用程序主入口点包括单个自定义SCSS文件（使用时sass-loader）：
// app.js
import 'custom.scss'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项目中全局安装。
module.exports = {
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
componentPlugins: [
'LayoutPlugin',
'FormPlugin',
'FormCheckboxPlugin',
'FormInputPlugin',
'FormRadioPlugin',
'ToastPlugin',
'ModalPlugin'
],
directivePlugins: ['VBPopoverPlugin', 'VBTooltipPlugin', 'VBScrollspyPlugin']
}
}新的2.0.0-rc.20有用于提供两个额外的辅助插件$bvModal和$bvToast注射（如果你不使用 ModalPlugin或ToastPlugin插件），在可用componentPlugins的选项：
BVModalPlugin- 提供$bvModal用于生成 消息框的注入。BVToastPlugin- 提供注射$bvToast以生成 按需吐司。
2.0.0-rc.20中的新增功能您还可以选择导入单个组件和/或指令，方法是配置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 模式时有效。不处于production模式（即 dev模式）时，您可能会注意到较大的束大小。
不要使用Nuxt模块如果要将单个BootstrapVue组件导入到 Nuxt应用程序的特定页面和/或组件中。请按照上面的 模块捆绑器部分以及下面的 选择性导入部分进行操作。
使用Nuxt.js传递自定义BootstrapVue配置
如果需要传递自定义 BootstrapVue配置，可以通过在以下位置设置config属性来实现nuxt.config.js：
module.exports = {
modules: ['bootstrap-vue/nuxt'],
bootstrapVue: {
config: {
// Custom config options here
}
}
}使用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：更大，生产就绪的模板，有更多选项
# Ensure Vue CLI is installed and up to date
npm i -g vue-cli
# Initialize a BootstrapVue project in the directory 'my-project'
vue init bootstrap-vue/webpack-simple my-project
# Change into the directory
cd my-project
# Install dependencies
npm i
# Fire up the dev server with HMR
npm run dev您可以重复上述替换命令bootstrap-vue/webpack-simple与 bootstrap-vue/webpack该模板的WebPack。
Vue CLI 3
与V2不同，Vue CLI 3不使用模板。
在目录中创建一个新项目my-project：
npx @vue/cli create my-project输入my-project目录并安装bootstrap-vue：
npm i bootstrap-vue在引擎盖下，Vue CLI使用webpack，因此我们可以像webpack说明一样注册BootstrapVue插件。
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)有关Vue CLI 3的其他配置，以便在各种BootstrapVue组件上使用image src props的项目相对路径，请参阅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设置的新应用程序，以启动项目。
将来，此插件将提供更高级配置和模板的选项。
选择性组件和指令包含在模块捆绑器中
在2.0.0-rc.20中简化
使用模块捆绑器时，您可以选择仅导入特定组件组（插件），组件和/或指令。
注意：最佳树抖动仅在webpack 4处于production模式且启用了javascript缩小时才有效 。
组件组和指令作为Vue插件
在2.0.0-rc.22中变化
您可以通过从componentsor directives目录导入来将组件组和指令导入为Vue插件：
// This imports all the layout components such as , , :
import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)
// This imports as well as the v-b-modal directive as a plugin:
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)
// This imports along with all the 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)作为插件导入时，大多数情况下都会导入所有子组件和相关指令。即导入时
有两个额外的辅助插件可用于提供$bvModal和$bvToast注入（如果您不使用ModalPlugin或ToastPlugin插件）可从以下位置导入'bootstrap-vue'：
BVModalPlugin- 提供$bvModal用于生成 消息框的注入。BVToastPlugin- 提供注射$bvToast以生成 按需吐司。
个别组件和指令
在2.0.0-rc.22中变化
如果您只想引入特定组件或组件集，可以通过直接导入这些组件来完成此操作。
要挑选组件/指令，首先将其导入到正在使用它的文件中：
// Place all imports from 'bootstrap-vue' in a single import
// statement for optimal bundle sizes
import { BModal, VBModal } from 'bootstrap-vue'然后将其添加到组件定义中：
Vue.component('my-component', {
components: {
'b-modal': BModal
},
directives: {
// Note that Vue automatically prefixes directive names with `v-`
'b-modal': VBModal
}
// ...
})或者在全球注册：
Vue.component('b-modal', BModal)
// Note that Vue automatically prefixes directive names with `v-`
Vue.directive('b-modal', VBModal)Vue允许使用各种组件和指令名称语法，因此可以随意使用 kebab-casing （示出）， camelCasing， PascalCasing和/或对象属性简写（仅限组件）。
浏览器
在HTML 部分中添加Boostrap和BootstrapVue CSS URL ，然后添加所需的JavaScript文件。
在支持旧浏览器时（请参阅下面的浏览器支持），您需要在加载Vue和BoostrapVue JavaScript文件之前包含一个用于处理现代JavaScript功能的polyfill。
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous">script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js">script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js">script>构建变体
为构建环境/打包器选择最佳变体有助于减少捆绑包大小。如果您的捆绑器支持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()，等等） PromiseMutationObserver
如果你想支持旧的IE，Android和iOS设备，你可能想要使用 core-js和 mutationobserver-shim：
npm install core-js regenerator-runtime mutationobserver-shim- 在应用主入口点导入polyfill：
import 'core-js/stable"'
import 'regenerator-runtime/runtime'
import 'mutationobserver-shim'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'如果使用已弃用的@ babel / polyfill：
npm install @babel/polyfill mutationobserver-shim- 在应用主入口点导入polyfill：
import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'或者，使用Polyfill.io通过