看了很多添加的教程蝗茁，發(fā)現(xiàn)大多教程不清楚醋虏，或者比較老，同時(shí)使用了Bootstrap + Vue
但是一直存在各種問題哮翘，最后才找到一個(gè)不錯(cuò)的方案颈嚼，這里寫出了記錄下。
此教程是在已經(jīng)建立好項(xiàng)目的基礎(chǔ)上添加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添加插件來處理依賴關(guān)系,在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導(dǎo)入到應(yīng)用程序的入口點(diǎn)：
import App from './App'
import router from './router'
import 'bootstrap'```
###編輯App.vue的文件<style>部分阻课，將Bootsrap導(dǎo)入到您應(yīng)用的根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
