Vue CLI3.0 中使用jQuery 和 Bootstrap

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法，可是有时候又要用，因此放上个人引入设置，供你们参考。

在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 须要设置不少配置项，网上有不少方法法，这里不重复写了。直接上 Vue CLI3.0 配置步骤。

第一步：安装 jQuery、 Bootstrap、popper.js依赖。

其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单，因此须要引入。

npm install jquery bootstrap@3 popper.js --save

注意：上面的 bootstrap@3 指的是安装 Bootstrap 第三版，若是不加 @3 符号，默认安装第四版。

第二步：配置 main.js

引入 Boostrap 请看配置文件。

//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在这里引入 bootstrap。默认只引入 bootstrap 中的 js，css 须要另外引入，个人 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也能够在这里引入 bootstrap.css ;
//import "bootstrap/dist/css/bootstrap.css";

Vue.config.productionTip = false;

new Vue({
  router: router,
  store: store,
  render: h => h(App)
}).$mount("#app");

个人 APP.vue 的配置，只是引入 bootstrap.css，代码仅供参考。

<style>
// 由于个人 bootstrap 文件通过了我本身的调整，因此单独放在 assets 文件夹中作单独引入。
//若是你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件便可。
@import "./assets/css/bootstrap.css";
</style>

第三步：配置 vue.config.js 文件

Vue CLI3.0 中的全部配置都在 vue.config.js 文件，你在这里配置好，脚手架自动使用你的配置覆盖掉默认的配置。
若是你的项目中没有 vue.config.js 文件，请你在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置以下：

const webpack = require("webpack");

module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。
//webpack ProvidePlugin 的含义是建立一个全局的变量，使这个变量在 webpack 各个模块内均可以使用。这里的配置含义是建立 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，建立 'Popper' 变量指向 popper.js 依赖。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
      }
}

第四步：具体使用范例

我作了一个 tooltip 的示例，鼠标放上去会出现 tooltip 提示

//template
<template>
  <div class="content-wrap">
    <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: "componentsTooltips",
  mounted: function() {
    //在页面加载完毕后初始化 tooltip， 至关于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }
    $('[data-toggle="tooltip"]').tooltip();
  }
};
</script>

若是 eslint 报误，请设置 .eslintrc.js 文件。

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

本人测试结果以下：

欢迎你们批评指正。
参考文档：
Vue CLI3.0: https://cli.vuejs.org/zh/guid...
Bootstrap tooltip ：https://v3.bootcss.com/javasc...
Stackoverflow: https://stackoverflow.com/que...