Using jQuery and Bootstrap in Vue is not particularly in line with Vue's native writing method, but sometimes it has to be used, so put my introduction settings for your reference.

To introduce jQuery and Bootstrap into Vue cli 2.0, you need to set many configuration items. There are many methods on the Internet, which will not be repeated here. Go directly to the Vue CLI3.0 configuration step.

Step 1: install jQuery, Bootstrap, popper.js dependencies.

popper.js is used to display pop-up window, prompt and pull-down menu in Bootstrap, so it needs to be introduced.

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

Note: the above bootstrap@3 refers to the installation of the third version of Bootstrap. If the @ 3 symbol is not added, the fourth version will be installed by default.

Step 2: configure main.js

Please refer to the configuration file for importing bootstrap.

//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//Introduce bootstrap here. By default, only js in bootstrap is imported. css needs to be imported in addition. My bootstrap.ss is imported in APP.vue
import "bootstrap";
//You can also introduce bootstrap.css here;
//import "bootstrap/dist/css/bootstrap.css";

Vue.config.productionTip = false;

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

My APP.vue configuration only introduces bootstrap.css. The code is for reference only.

<style>
// Because my bootstrap file has been adjusted by myself, it is imported separately in the assets folder.
//If you just want to use the native bootstrap, just import the css file into main.js.
@import "./assets/css/bootstrap.css";
</style>

Step 3: configure the vue.config.js file

All the configurations in Vue cli 3.0 are in the file vue.config.js. If you have configured them here, the scaffold will automatically use your configuration to override the default configuration.
If you do not have the vue.config.js file in your project, please create a new vue.config.js file in the same level directory of the package.json file. The specific configuration in the file is as follows:

const webpack = require("webpack");

module.exports = {
//configureWebpack is the place in Vue cli 3.0 that is used to configure the parameters of the webpack plug-in. You can set it here to create or overwrite the default configuration of webpack.
//The meaning of webpack ProvidePlugin is to create a global variable that can be used in each module of webpack. The configuration meaning here is to create three variables' $','jquery' and 'window.jQuery' to point to jQuery dependency, and create a 'Popper' variable to point to popper.js dependency.
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
      }
}

Step 4: specific use examples

I've made an example of toolip, and a tooltip will appear when I put the mouse on it

//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() {
    //Initialize the toolip after the page is loaded, which is equivalent to $(function() {$('[data toggle = "toolip"]'). Toolip();}
    $('[data-toggle="tooltip"]').tooltip();
  }
};
</script>

If the eslint reports an error, set the. eslintrc.js file.

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

My test results are as follows:

Welcome to criticize and correct.
Reference documents:
Vue CLI3.0: https://cli.vuejs.org/zh/guid...
Bootstrap tooltip : https://v3.bootcss.com/javasc...
Stackoverflow: https://stackoverflow.com/que...