Vue CLI3.0中使用jQuery和Bootstrap的教學（詳細步驟）

這篇文章帶給大家的內容是關於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>
    <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>

如果eslint 報誤，請設定.eslintrc.js 檔案。

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

本人測試結果如下：

#

以上是Vue CLI3.0中使用jQuery和Bootstrap的教學（詳細步驟）的詳細內容。更多資訊請關注PHP中文網其他相關文章！