添加bootstrap到Vue-CLI 项目中

看了很多添加的教程，发现大多教程不清楚，或者比较老，同时使用了Bootstrap + Vue
但是一直存在各种问题，最后才找到一个不错的方案，这里写出了记录下。
此教程是在已经建立好项目的基础上添加bootstrap

添加Bootstrap及其依赖jQuery和Popper.js

npm install bootstrap@4.0.0-beta popper.js jquery --save-dev

编辑你的/build/webpack.dev.conf.js文件，为jQuery和Popper.js添加插件来处理依赖关系,在plugins中添加start--end 中间部分

  plugins: [
//start
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
    // In case you imported plugins individually, you must also require them here:
    Util: "exports-loader?Util!bootstrap/js/dist/util",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
  })
//end
]

编辑/src/main.js将Bootstrap导入到应用程序的入口点：

import App from './App'
import router from './router'
import 'bootstrap'```

###编辑App.vue的文件<style>部分，将Bootsrap导入到您应用的根css中：
```<template>
 <div id="app">
   <img src="./assets/logo.png">
   <router-view></router-view>
 </div>
</template>

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

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}

@import'~bootstrap/dist/css/bootstrap.css'
</style>

下面你就可以开始使用了bootstarp4