为何BootstrapVue能成为Vue前端框架顶流?

前有科技后进阶 2024-06-17 16:31:09

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

什么是 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

3 阅读:498

前有科技后进阶

简介:感谢大家的关注