vue構成bootstrap

 、  jquery bootstrap popper       cnpm install jquery bootstrap@3 popper.js --save   cnpm      npm    
 Vue CLI3.0   jQuery Bootstrap   ，    ：

 、     jQuery、 bootstrap、popper.js
boostrap        jQuery、popper.js

npm install –save jquery bootstrap popper.js
  ：bootstrap    V4，     V3，  bootstrap@3

 、   main.js
//main.js

import Vue from 'vue'
import store from '@/store'
import router from '@/router'
import App from '@/App.vue'
import 'bootstrap'                  //   bootstrap.js
import '@/assets/css/bootstrap.css'     
 
Vue.config.productionTip = false;
 
new Vue({
 router: router,
 store: store,
 render: function (h) {  return h(App)  }
}).$mount("#app");
   APP.vue    ，     bootstrap.css，      。

 、   vue.config.js   
Vue CLI3.0       vue.config.js   ，                   。
          vue.config.js   ，    package.json             vue.config.js   。          ：

const webpack = require("webpack"); 
module.exports = {
//    webpack             vue.config.js  configureWebpack        
//webpack ProvidePlugin        ， webpack          。
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({    
        $: 'jquery',         //    '$'、'jQuery'、'window.jQuery'         jquery
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']   //    'Popper'       popper.js。
       })
    ]
   }
}
 、  
   tooltip   ，          tooltip   。

<template>
 <div>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
  <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
  <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
  <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
 </div>
</template> 
 
<script>
export default {
 name: "btnTooltips",
 mounted: function() {  
  $('[data-toggle="tooltip"]').tooltip();  //         tooltip，   $(function(){ $('[data-toggle="tooltip"]').tooltip(); }
 }
};
</script>
  eslint  ，   .eslintrc.js   。

module.exports = {
 env: {
    node: true,
    jquery: true
 }
};