這篇文章主要介紹了Vue CLI3.0中使用jQuery和Bootstrap的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、營銷型網(wǎng)站建設(shè)、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)公司、手機網(wǎng)站開發(fā)、微商城、網(wǎng)站托管及成都企業(yè)網(wǎng)站維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都純水機行業(yè)客戶提供了網(wǎng)站制作服務(wù)。

Vue 中使用 jQuery 和 Bootstrap 不是特別符合 Vue 原生的寫法，但是有時候又要用，所以放上我的引入設(shè)置，供大家參考。

在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要設(shè)置很多配置項，網(wǎng)上有很多方法法，這里不重復(fù)寫了。直接上 Vue CLI3.0 配置步驟。

第一步：安裝  jQuery、 Bootstrap、popper.js依賴。

其中popper.js 用于在 Bootstrap 中顯示彈窗、提示、下拉菜單，所以需要引入。

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

注意：上面的 bootstrap@3 指的是安裝 Bootstrap 第三版，如果不加 @3 符號，默認(rèn)安裝第四版。

第二步：配置 main.js

引入 Boostrap 請看配置文件。

//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在這里引入 bootstrap。默認(rèn)只引入 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，代碼僅供參考。

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

Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在這里配置好，腳手架自動使用你的配置覆蓋掉默認(rèn)的配置。

如果你的項目中沒有 vue.config.js 文件，請你在 package.json 文件的同級目錄新建一個 vue.config.js 文件。文件內(nèi)具體的配置如下：

const webpack = require("webpack");

module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件參數(shù)的地方，你在這里設(shè)置，會新建或者覆蓋 webpack 默認(rèn)配置。
//webpack ProvidePlugin 的含義是創(chuàng)建一個全局的變量，使這個變量在 webpack 各個模塊內(nèi)都可以使用。這里的配置含義是創(chuàng)建 '$'、'jQuery'、'window.jQuery' 三個變量指向 jquery 依賴，創(chuàng)建 'Popper' 變量指向 popper.js 依賴。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
      }
}

第四步：具體使用范例

我做了一個 tooltip 的示例，鼠標(biāo)放上去會出現(xiàn) tooltip 提示

//template

如果 eslint 報誤，請設(shè)置 .eslintrc.js 文件。

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

本人測試結(jié)果如下：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Vue CLI3.0中使用jQuery和Bootstrap的方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細的解決方法等著你來學(xué)習(xí)!

網(wǎng)站名稱：VueCLI3.0中使用jQuery和Bootstrap的方法-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://weahome.cn/article/dgecss.html