Tutorial on using jQuery and Bootstrap in Vue CLI3.0 (detailed steps)

This article brings you a tutorial (detailed steps) on using jQuery and Bootstrap in Vue CLI3.0. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

The use of jQuery and Bootstrap in Vue is not particularly in line with Vue’s native writing method, but it is sometimes used, so I put my import settings for your reference.

Introducing jQuery and Bootstrap into Vue CLI2.0 requires setting up many configuration items. There are many methods on the Internet, so I won’t repeat them here. Go directly to the Vue CLI3.0 configuration steps.

Step one: Install jQuery, Bootstrap, popper.js dependencies.

popper.js is used to display pop-up windows, prompts, and drop-down menus in Bootstrap, so it needs to be introduced.

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

Note: The bootstrap@3 above refers to installing 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

Introduce Boostrap Please see the configuration file.

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

The configuration of my APP.vue just introduces bootstrap.css, and the code is for reference only.

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

Step 3: Configure the vue.config.js file

All configurations in Vue CLI3.0 are in the vue.config.js file, you are here Once configured, the scaffolding will automatically use your configuration to overwrite the default configuration.

If there is no vue.config.js file in your project, please create a new vue.config.js file in the same directory as the package.json file. The specific configuration in the file is as follows:

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

Step 4: Specific usage example

I made a tooltip example, and the tooltip will appear when the mouse is placed on it Tip

//template
<template>
  <div>
    <button>Tooltip on left</button>
    <button>Tooltip on top</button>
    <button>Tooltip on bottom</button>
    <button>Tooltip on right</button>
  </div>
</template>


<script>
export default {
  name: "componentsTooltips",
  mounted: function() {
    //在页面加载完毕后初始化 tooltip， 相当于$(function(){ $(&#39;[data-toggle="tooltip"]&#39;).tooltip(); }
    $(&#39;[data-toggle="tooltip"]&#39;).tooltip();
  }
};
</script>

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

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

My test results are as follows:

The above is the detailed content of Tutorial on using jQuery and Bootstrap in Vue CLI3.0 (detailed steps). For more information, please follow other related articles on the PHP Chinese website!