大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 BootstrapVue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

借助 BootstrapVue，开发者可以使用 Vue.js 和世界上最流行的前端 CSS 库 Bootstrap v4 在 Web 上构建响应式、移动优先和 ARIA 可访问的项目。

BootstrapVue 拥有超过 85 个组件、 45 个可用插件、多个指令和 1200 多个图标，为 Vue.js v2.6 提供了最全面的 Bootstrap v4 组件和网格系统实现之一，并配有广泛且自动化的 WAI-ARIA 可访问性标记。

目前 BootstrapVue 在 Github 通过 MIT 协议开源，有超过 15k 的 star、2k 的 fork、175k 的项目依赖量、300 + 代码贡献值，是一个妥妥的前端优质开源项目。

如何使用 BootstrapVue

如果项目使用 Webpack、Parcel 或 rollup.js 等模块捆绑器，开发者可以轻松地将包直接包含到当前项目中。但是，开发者需要首先使用 npm 或 yarn 获取最新版本的 Vue.js、Bootstrap v4 和 BootstrapVue：

// With npmnpm install vue bootstrap bootstrap-vue// With yarnyarn add vue bootstrap bootstrap-vue

然后在应用程序入口点（通常是 app.js 或 main.js）中注册 BootstrapVue：

import Vue from 'vue'import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'// 让 BootstrapVue 在整个项目可用Vue.use(BootstrapVue)// BootstrapVue 的 icon 组件插件是可选的Vue.use(IconsPlugin)

如果要更改 Bootstrap 的默认样式（例如 $body-color），则必须使用 Bootstrap 和 BootstrapVue 的 scss 文件。 创建自己的 scss 文件（例如 app.scss），其中包含 2 个 @import：

// 定义默认变量$body-bg: #000;$body-color: #111;// 导入 Bootstrap 和 BootstrapVue SCSS 文件// 注意顺序很重要@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)

BootstrapVue 还支持 Tree shaking、高级指令、Nuxt.js 集成等高级用法，这些示例可以参考文末资料自行学习，本文不再过多展开。

参考资料

https://github.com/bootstrap-vue/bootstrap-vue

https://bootstrap-vue.org/

https://bootstrap-vue.org/docs