閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：以六角學院的「Vue出一個電商網站」＆大陸慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」（主要學架設MongoDB）作為主要教材嘗試在30天內打造網路商城

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌目標

▌互動式窗 Bootstrap 文件

https://bootstrap.hexschool.com/docs/4.0/components/modal/

▌環境安裝

在main js引用bootstrap套件

import 'bootstrap'    //main.js

環境要安裝 jquery popper.js

npm install --save jquery popper.js

▌用method開啟

• 有時候會需要先取得API在開啟視窗，因此不能直接用上面的code
• html改成用@click觸發 @click="openModal"
• 利用modal("show")函式，openModal() { $("#producteModal").modal("show"); }
• 要記得從JQ引用$字號

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

<script>
import $ from "jquery"; //要從JQ引用$字號
export default {
  data() {
    return {
      products: []
    };
  },
  methods: {
    openModal() {
      $("#producteModal").modal("show");
    }
  },
  created() {
    this.getproduct();
  }
};
</script>