Bootstrap是使用得最广泛的前端 CSS 框架。本文演示如何使用 Vue-Cli3 命令行工具, 在 Vue 框架中集成 Bootstrap。

因为原生的 Bootstrap 是基于 jquery 来编写的,如果我们不想在 Vue 项目中引入 jquery, 则可以选择使用 Bootstrap-vue 这个项目官网。Bootstrap-vue是一个开源项目,其将Bootstrap 4和 Vue 2集成在一起,并去除了对jquery的依赖。

安装 Bootstrap-vue

Bootstrap-vue 支持的 boostrap 版本为 4.3以上, Vue 的版本是 2.6以上。如果你使用 Vue-Cli3 命令行工具构建的项目,恭喜你!安装 Bootstrap-vue非常简单。直接在项目目录中执行:

1
vue add bootstrap-vue

系统显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
yarn add v1.13.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-bootstrap-vue@0.4.0
info All dependencies
└─ vue-cli-plugin-bootstrap-vue@0.4.0
✨ Done in 4.78s.
✔ Successfully installed plugin: vue-cli-plugin-bootstrap-vue

然后系统会提示,是否使用 babel/polyfill?这是一个转换 ES6 为 ES5 代码的转换器,推荐选择选择:Y

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
? Use babel/polyfill? Yes

🚀 Invoking generator for vue-cli-plugin-bootstrap-vue...
📦 Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...

success Saved lockfile.
✨ Done in 26.73s.
⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: vue-cli-plugin-bootstrap-vue
The following files have been updated / added:

src/plugins/bootstrap-vue.js
babel.config.js
package.json
src/main.js
yarn.lock

You should review these changes with git diff and commit them.

可以看到,安装过程会自动帮我们修改项目中的一些文件,包括:

1
2
3
4
5
src/plugins/bootstrap-vue.js
babel.config.js
package.json
src/main.js
yarn.lock

打开 src/main.js, 我们能看到改变:

1
2
3
4
5
6
7
8
9
10
11
import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

可以看到,第 1,2,4行代码是工具帮我们加上去的。接下来,就可以轻松的使用 bootstrap 的功能了。

我们简单的修改 App.vue, 来试试 bootstrap-vue。 修改后的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div id="app">
<b-alert show>Default Alert</b-alert>
</div>
</template>

<script>

export default {
name: 'app'
}
</script>

<style>
</style>

运行应用,可以看到应用首页包含一个 boostrap 风格的警告栏。