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:

bootstrap tooltip ：

*:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。