Vue.js 電商練習技術整理 -- 導入 Bootstrap 與 jQuery

文章目的

為了讓 Vue Cli 能正常使用 Bootstrap 4 的 jQuery 相關功能，本文用來記錄導入流程。

本次示範

本次要用來導入的是 Bootstrap 4 的 Modal 元件，那因為 Modal 會需要利用到 jQuery 來達到效果，因此我們需要先正確的導入 Bootstrap 4 的 js 檔案與 jQuery。—Modal元件官方文件

導入 Bootstrap 4 js 檔與 jQuery

我們先到進入點(main.js)，將 Bootstrap 4 js 檔 import 進來，程式碼如下：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import 'bootstrap'
import App from './App'
import router from './router'

這邊要記得 import 的順序自定義檔案都要放在最後。
接著我們來到需要引用 Modal 的頁面(Vue檔)，在 <script> 標籤上做以下操作：

import $ from 'jquery' //需使用元件導入(區域)

此為區域的引入，引入的 jQuery 僅有在該元件能使用，若想要全域引用可以在 main.js 加入以下程式碼：

import 'jquery' //main.js導入(全域)

這邊有一點要注意，若有使用 ESlint 會顯示不建議在全域導入，因此需額外加入以下程式碼：

/* global $ */ //main.js導入(全域)

最後，我們將 Bootstrap 4 的 Modal 元件程式碼放入需使用的 Vue 元件內即可。

透過事件觸發顯示 Modal

我們這邊要稍微修改一下 Modal 的啟動方式，一般來講僅需要按鈕有對應的 Modal id 就可以啟動它。
那會要改寫成觸發事件是因為，這樣可以更靈活地顯示 Modal，如遇到需要接取 API 時可以讓 API 資料確定接收後再顯示 Modal。
這邊我們僅改成利用點擊觸發事件，如需要其他觸發方法可再自行更改。

• 先在要觸發事件的按鈕上增加點擊事件，程式碼如下：

  <button class="btn btn-primary" @click.prevent="openModal">建立新的產品</button>

• 接著建立我們的 methods，程式碼如下：

  methods: {
     openModal () {
       $('#productModal').modal('show')
     }
   },

  有關程式碼可參考官方文件 —Modal show

---

參考資料

六角學院課程–Vue 出一個電商網站