Vue CLI3.0中使用jQuery和Bootstrap的方法

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

//main.jsimport 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");

<style>// 因为我的 bootstrap 文件经过了我自己的调整，所以单独放在 assets 文件夹中做单独引入。//如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。@import "./assets/css/bootstrap.css";</style>

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']       })    ]   }}

//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>

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