在 Vue 中使用Bootstrap

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

系统显示：

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

? 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.

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

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

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

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。修改后的代码如下:

<template>
  <div id="app">
    <b-alert show>Default Alert</b-alert>
  </div>
</template>

<script>

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

<style>
</style>

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