在Vue CLI3.0中使用jQuery和bootstrap

在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
 }
};