使用 Vue3、tailwindcss 及 Element Plus 製作完成，可藉由後台來上架商品及撰寫文章，藉此豐富前台頁面。
採用 landing page 風格來製作。
- 可透過中間的訂單列表(Orderbar)來輸入您的報名資訊，此訊息會存在 sessionStorage。有輸入的話會在購物車頁面直接帶入，省去重複填寫資料的問題。
- 取得優惠券或套票能取得後台設定的優惠券(Coupon)等資料，並在旁邊添加複製功能。
- 將後台嚴選計畫功能的產品顯示於此。
- 左側篩選器能夠從所有商品中篩選出相符合的地區及旅行天數產品。
- 右側產品使用手刻卡片元件顯示，並以分頁元件來製作分頁。
- 商品內頁能點選 list 符號來切換商品圖片，並在左側提供加入購物車功能。產品下方也顯示相關地區產品。
- 由前台加入的商品將顯示於此。
- 可透過修改人數來更新訂單。
- 產品列表提供單項產品刪除及整批刪除功能。
- 優惠券輸入框能輸入由首頁訂單列表(Orderbar) "優惠券或套票" 區塊取得的優惠券來獲得折扣。
- 必填訂購資訊使用 vee-validate 4 來判斷，以防止用戶在未輸入的情況下按下送出。
- 將後台旅遊札記功能的文章顯示於此。
- 以分頁元件來製作分頁。
- 可將購物流程完成後取得的訂單編號輸入該藍未來取得訂單資訊。
使用 Element Plus 來製作後台網站
- 產品、優惠券、文章的 CRUD。訂單的新增得由前台的購物流程才得以新增。
- 可新增圖片，點擊兩下可刪除圖片。
- 可藉由富文本格式(RTF)來撰寫文章。
登入資訊存在 cookie，以登入的話將直接進入後台，無須重複輸入帳密。
- Vue 3: 使用 composition api 撰寫。
- Vue CLI: 快速架設開發環境。
- Vue Router: 建立整體網站路由。
- Axios: 串接 API 與後端進行串接、傳遞資訊等用途。
- JavaScript: 互動式網頁。
- RWD: 響應式網頁，可以手機、平板進行觀看。
- Scss: 建立網頁樣式。
- HTML: 網頁基本架構。