在Vue CLI3.0中使用jQuery和bootstrap

在Vue CLI3.0中使用jQuery和Bootstrap的方法，步驟以下：

1、安裝依賴 jQuery、 bootstrap、popper.js
boostrap中的不少組件依賴jQuery、popper.js

npm install –save jquery bootstrap popper.js

注意：bootstrap默認安裝V4，若是要安裝V3，使用bootstrap@3

2、配置 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，代碼僅供參考。

3、配置 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。
       })
    ]
   }
}

4、示例
一個 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
 }
};