2017年6月12日

[Vue] 在 Vue 中使用（ES6 import） Bootstrap 4 和 jQuery

      ,  
由於 bootstrap4 需要依賴 jquery 和 tether 這兩個套件，因此在 webpack 的環境底下使用 bootstrap4 有一些需要留意的細節才能正常載入使用。
⚠️ 這裡使用 @vue/cli 版本為 4.0.5，不同版本的設定方式可能略有不同，須特別留意。

使用 Vue CLI 安裝 vue

# 安裝 Vue CLI，目前版本為 4.0.5
$ npm install -g @vue/cli

# 使用 Vue CLI 建立專案
$ vue create vue-sandbox
vue-cli

安裝 Bootstrap

# 安裝 Bootstrap，目前版本為 4.3.1
$ npm i bootstrap
Imgur

載入 Bootstrap CSS 檔

可以直接在 main.js 中引入 bootstrap 的 css 檔：
// ./src/main.js
import 'bootstrap/dist/css/bootstrap.css'
Imgur

試試看：使用 Bootstrap 的 Alert 元件

現在，先來試試看是否有成功載入 Bootstrap 的樣式。打開 ./src/components/HelloWorld.vue，在裡面放入 Bootstrap 中的 alerts 元件，像這樣：
<!-- ./src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <!-- 開始：Bootstrap alert -->
    <div class="container">
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div><!-- 結束：Bootstrap alert -->

    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>

    <!-- ... -->
  </div>
</template>
使用 npm run serve 就可以把專案執行起來。沒有問題的話，畫面應該會像這樣子，可以看到中間已經套用了 Bootstrap 的 Alert 樣式：
Imgur
但此時若點擊 Alert 組件的關閉按鈕時，該警告並不會消失。這是因為我們還沒載入和 Bootstrap 有關的 JavaScript 檔案。

安裝和 Bootstrap 有關的 JavaScript 檔

如果你只是要載入 Bootstrap 的樣式檔，基本上到上面那步就可以了。
但是如果你有需要使用到 bootstrap 的其他互動功能，那麼就需要在額外載入 jQuery, Popper.js 和 Bootstrap 的 js 檔。
因此，讓我們一併安裝 jQuery 和 Popper,js：
$ npm install --save jquery popper.js

載入 Bootstrap 的 JavaScript 檔

要使用 Bootstrap 的 JS 檔，一樣直接在 ./src/main.js 中載入 bootstrap 就可以了：
// ./src/main.js
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'      // 在這裡載入 Bootstrap 的 JavaScript 檔

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
此時當我們點擊 Alert 組件的關閉按鈕時，該警告就會消失：
Imgur

載入 jQuery 使用

在上面的例子中，只要載入 Bootstrap 的 JavaScript 檔案後，它會自動去找到相依的 jQuery 套件，因此並不需要額外載入 jQuery 就可以使用。
但有些時候，Bootstrap 的有些互動行為是需要先透過 jQuery 來初始化的，例如 Tooltip 組件。Tooltip 組件在使用前需要針對想要產生 Tooltip 的元素使用 jQuery 來初始化它：
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
這時候我們就會需要使用到 jQuery 提供的 $。要怎麼在 Vue 專案中取用到 jQuery 的 $ 呢？這時候我們會需要對 Vue 或者說是 Webpack 進行一些設定。

透過 vue.config.js 設定 webpack

在 Vue 專案中要進行 webpack 的設定，需要在根目錄中新增一支名為 vue.config.js 的檔案（放在和 package.json 同一層）：
// 新增一隻名為 vue.config.js 的檔案在專案的根目錄

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery',
      }),
    ],
  },
};
設定好了之後，在 Vue 專案中，就可以在需要使用 jQuery 的地方匯入 $ 就可以了：
import $ from 'jquery';

試試看：使用 Bootstrap 的 Tooltip 元件

現在讓我們用 Bootstrap Tooltip 元件來測試一下。先在 ./src/components/HelloWord.vue 中加入 Bootstrap 的 Tooltip 元件：
<!-- ./src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <div class="container">
      <!-- Bootstrap Alert -->
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div> <!-- /Bootstrap Alert -->

      <!-- Bootstrap Tooltip -->
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
      </button> <!-- /Bootstrap Tooltip -->
    </div>

    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>

    <!-- ... -->
  </div>
</template>
這時候畫面會像這樣，但實際上滑鼠移過去並不會有任何效果：
Imgur
要達到滑鼠移過去有效果的話，需要載入 jQuery 並初始化它。因此我們可以在 ./src/components/HelloWorld.vue 的 <script></script> 內去載入 jQuery 並組件 mounted 之後初始化它，像是這樣：
<!-- ./src/components/HelloWorld.vue -->
<template>
  <!-- ... -->
</template>

<script>
import $ from "jquery";    // STEP 1：載入 jQuery
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  mounted() {
    // STEP 2：在 mounted 時初始化 tooltip
    $(function() {
      $('[data-toggle="tooltip"]').tooltip();
    });
  }
};
</script>
完成後，當滑鼠移過去時，就會出現 Tooltip 的提示文字：
Imgur
如此就可以繼續開心的使用 Bootstrap 啦！

完整程式碼

完整程式碼可在 vue-import-bootstrap4 @ github 檢視。

額外補充（將 jQuery 載入到全域環境）

如果我們只是使用 import 'jquery' 這種作法，是無法在全域環境（window）下使用 jQuery（這裡抓到的 $ 是 chrome 中內建的選擇器）：
img
因此如果我們希望在全域環境下也可以使用 jQuery，我們可以使用下面這樣的寫法：
// ./src/main.js
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'

// 讓瀏覽器的全域環境可以使用到 $
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
img

參考資料

0 意見:

張貼留言