1.安装依赖

  1. yarn add bootstrap-vue bootstrap

2.public/index.html

要通过CDN将Bootstrap和BootstrapVue添加到Vue项目，请打开项目公共文件夹中的index.html文件，并将此代码添加到适当的位置：

  1. //<head>
  2. <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
  3. <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
  5. //<body>
  6. <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  7. <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

3.在utils/config.js中引入依赖 (main.js)

  1. import BootstrapVue from 'bootstrap-vue'
  2. Vue.use(BootstrapVue)

在这里做的事情非常简单，我们导入了BoostrapVue包，然后用Vue.use()函数在程序中注册它，以便Vue程序可以识别。

我们还需要将Bootstrap CSS文件导入到项目中。将这段代码段添加到utils/config.js(main.js)文件中：

  1. import 'bootstrap/dist/css/bootstrap.css'
  2. import 'bootstrap-vue/dist/bootstrap-vue.css'

4.问题

如果bootstrap的样式会影响自身的样式则需要在样式后面加上一个!important

  1. body{
  2.   background:#red!important;
  3. }