此專案為六角學院 2025 切版直播班的第五、六週作業之成品
- Nuxt3（Vue 加強版）
- Tailwind CSS
建議使用 VSCode 搭配
專案設置（Project setup）
將專案複製到本地端
$ git clone https://github.com/happyloa/Hex2025-f2e-live-week5and6.git套件安裝
$ cd Hex2025-f2e-live-week5and6
$ npm install執行專案（Start the server）
$ npm run dev在瀏覽器上輸入
http://localhost:3000/
即可在本地端預覽專案
位於 pages
結構說明
pages
├── my-account 會員頁面（/my-account、/my-account/appointments、/my-account/plans）
├── about 關於職旅頁面（/about）
├── contact 聯絡我們頁（/contact）
├── index 首頁（/）
├── plans 服務方案頁（/plans）
├── privacy-policy 隱私權政策頁面（/privacy-policy）
└── terms-and-conditions 用戶條款頁面（/terms-and-conditions）
位於 components
結構說明
components
├── Atom 頁面上的小型元件（按鈕、等待資料回傳時顯示的轉圈裝飾）
├── Common 頁面上用來呈現內容的中型元件（卡片、CTA、修改密碼 Modal、會員頁面導覽列）
└── Layout 版面元件（導覽選單、頁尾、登入/註冊 Modal）
位於 public
結構說明
public
├── data 預約紀錄資料
├── icons 在網站上使用的各式 icon
├── images 在網站上使用的各式圖片
├── favicon.ico 網站的 favicon
├── logo-icon-w.svg 白色版 icon logo
├── logo-icon.svg icon logo
├── logo.svg 網站主要 logo
├── ogImage.webp 將網站連結貼到社群媒體時出現的預覽圖片
└── thumb.webp 讀我上用的縮圖
為了模擬未登入跟已登入狀態，每次進到網站時會登錄一個帶著 false 值的 isLoggedIn 鍵到 sessionStorage 內，只要進到會員頁面（/my-account、/my-account/appointments、/my-account/plans），這個值就會變成 true，導覽列上的元件也會換成已登入狀態（從按鈕改為使用者頭像&名稱）。
