[ Vue cli ] 要怎麼透過 Vue 控制 bootstrap 的 JS 元件呢？

Vue Cli 會將所有的元件匯出成 html 格式的檔案，其他元件（包刮根元件 app.vue）負責網頁的顯示面，也就是 body 標籤裡面的所有東西；main.js 則是負責 head 標籤裡面的內容。

在 main.js 裡用這段程式碼把 jQuery（如果需要的話） 和 bootstrap 整個匯進來：

 import 'jquery';
 import 'bootstrap';

 import "bootstrap/dist/js/bootstrap.js" 

把需要的套件載進專案裡面，我們就可以來處理 Bootstrap 的元件啦！從 Bootstrap 提供的使用說明中，可以看到官方有提供元件的 JavaScript 的方法，像是 $('#myModal').modal('show') 這樣的語法。這些語法讓身為開發者的我們可以用我們自己的程式碼控制 modal (其他元件也是依此類推)。比方說，我們不見得要用 button 叫出 modal，也可以透過這些 bootstrap 提供的方法，讓它每十秒跳出一次。（雖然不知道為什麼要做這種事情 ）。

 Bootstrap 的 JavaScript 是怎麼運作的？
在我們寫 JavaScript 時，如果我們要綁定事件在某個 button 上面，並更改某個 div 的樣式，我們會先透過 JavaScript 把這個 button 存在程式碼裡面，像這樣：

const btn = document.querySelector('.btn');
const div = document.querySelector('.div');

然後，我們再透過把事件綁定到按鈕上，透過程式碼去操控 div 的樣式。Bootstrap 也是一樣的，但是它不是透過 class 和 id 去做網頁元素的選取，而是透過 data-toggle 和 data-target 去選取 DOM。所以，我們才不需要寫任何的程式碼，只要加入相對應的 data- 標籤就可以有 JavaScript 的功能。

也因此，若我們想要透過自己的程式碼操作 Bootstrap 的 JavaScript 元件或功能，我們就要把 data- 的標籤拿掉。在拿掉標籤之後，我們就可以在 Vue 的 HTML template 中，把事件綁定到按鈕上：

<template>
   <button click="event"></button>
</template>

<script>
{
   methods: {
       event(){
           $('#myModal').modal('show'); 
       }
   }
}
</script>

這時候，程式碼可能會跳錯，顯示：它不認得 $ 是什麼 。

$ 是 jquery 專用的變數。在我們把 Bootstrap 的 js 檔匯入專案時，其實並沒有把 jquery 匯進來。這時候我們可以用局部或是全域的方式把 jquery 匯進來，這部分就看專案的需求如何。例如，在我目前在寫的專案可能只是需要在某一兩個頁面使用到 jquery 的語法；而且我還沒有用到所有 jquery 的語法，我只會用到 $ 這個變數，所以我可能就會考慮只要把 $ 載入相關元件就好。 

局部：

import $ from 'jquery';

import 'jquery';

*