在Vue-CLI30中使用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
 }
};