資源配置

準備套件

現在開始要開發網頁頁面。首先要準備的javascript和UI套件，也就是Vue.js和Semantic UI。

• Vue.js：下載
  下載後在檔案中可以這樣引用：

<script src="js/vue.min.js"></script>

或是使用連結：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

• Semantic UI：下載

下載後要引入CSS和JS檔

<link rel="stylesheet" type="text/css" href="CSS/semantic.min.css">

<script src="javascript/semantic.min.js"></script>

也可以使用連結：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.7/semantic.min.css">

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.7/semantic.min.js"></script>

由於之前的經驗，覺得Vue.js對於Semantic的操作性不好，所以像是下拉式選單的套件，用JQuery會比較方便。畢竟Semantic是for JQuery。

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

資源配置

網站前台將會分成三塊：HTML、apps（javascript）、models(Vue)
其中表皮就是放在HTML，裡面會包含HTML網頁的標籤，以及Semantic的套件內容，也就是UI都會在這個檔案裡面。
apps的部分，就是把Vue的Code放在這邊，其中指包含vue的動作指令，不包含
Component部分。或是其他操作，只要跟Vue.js語法有相關，或是為Javascript全部都放這邊管理。
簡單來說，HTML就是放「外表」的地方，apps就是放「動作」的動作程式碼的內容。鄉係說明將會在下一篇幾解。
models則是把一些可以重複使用的，或是模版化的 _component_存放的地方。

下一篇，新增功能將繼續努力