今日目標

• 專案結構整理（清晰的 Core / Features / Shared 分層）
• 最後幾個小優化（Lazy loading、SEO meta、圖片優化）
• Production build
• 部署到 Vercel 或 GitHub Pages
• 宣告 Vue 章節完成，準備進入 React 🚀

1. 專案結構整理

把檔案整理得像產品，讓面試官一看就覺得專業：

src/
├─ assets/              # 靜態資源（圖檔、icon）
├─ components/          # 共用元件（Hero, Header, Footer）
├─ composables/         # 可重用邏輯（若有）
├─ data/                # 固定資料（skills.ts）
├─ router/              # vue-router 設定
├─ stores/              # Pinia 狀態管理
├─ styles/              # 全域 CSS/SCSS
├─ views/               # 頁面級元件（Home.vue, ProjectDetail.vue, NotFound.vue）
└─ App.vue

👉 這樣清楚分 Core（router, stores, App.vue）、Features（views, components）、Shared（styles, assets）。

2. 小優化

(1) Lazy Loading 路由

在 src/router/index.ts：

const routes: RouteRecordRaw[] = [
  { path: '/', name: 'home', component: () => import('@/views/Home.vue') },
  { path: '/projects/:slug', name: 'project-detail', component: () => import('@/views/ProjectDetail.vue') },
  { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFound.vue') }
]

👉 只有用到的頁才載入，首頁更快。

(2) SEO 與 Meta

在 App.vue 或 router afterEach 內設定 meta：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [ /* ... */ ]

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

router.afterEach((to) => {
  const defaultTitle = 'Chiayu · 前端工程師履歷網站'
  document.title = (to.meta.title as string) || defaultTitle
})

在路由加 meta：

{ path: '/', component: () => import('@/views/Home.vue'), meta: { title: '首頁 - Chiayu Resume' } }

(3) 圖片優化

• 使用 srcset 讓圖片在不同裝置載入適當尺寸：

<img src="/assets/me-formal.jpg"
     srcset="/assets/me-formal-480.jpg 480w, /assets/me-formal-960.jpg 960w"
     sizes="(max-width: 600px) 480px, 960px"
     alt="Chiayu 的照片" />

• 預先載入關鍵圖片：

<link rel="preload" as="image" href="/assets/me-formal.jpg">

3. Production Build

npm run build

輸出到 dist/，檔案會自動壓縮與優化。

本地測試：

npm install -g serve
serve dist

4. 部署方案

(A) Vercel（推薦）

1. 推專案到 GitHub
2. 到 Vercel 連 GitHub repo
3. Framework 選 Vue，Build Command：npm run build，Output Dir：dist
4. 部署成功網址會是 https://your-project.vercel.app

👉 優點：快速、免費、支援自動更新。

(B) GitHub Pages

1. 在 vite.config.ts 設定 base：

export default defineConfig({
  base: '/resume-site-vue/', // repo 名稱
  plugins: [vue()],
})

1. Build：

npm run build

1. 推到 GitHub 分支，然後用 GitHub Pages 啟用 /dist。

   或安裝 gh-pages：

npm i gh-pages -D
npx gh-pages -d dist

網址會是：https://<username>.github.io/resume-site-vue/

5. 成果檢查清單 ✅

• / 首頁：Hero + About + Skills + Projects + Contact
• /projects/:slug 詳情頁：圖片、描述、GitHub / Demo 按鈕
• Skills：篩選 + 搜尋（debounce）
• 主題切換（Pinia store 持久化）
• 全域 Loading / Error 狀態
• SEO meta + Lazy loading routes
• 成功部署到雲端，可在履歷上放連結 🎉

小心踩雷

1. Vercel 預設偵測 framework 錯誤
   • ❌ 選 Angular/React
   • ✅ 設定 Vue / Vite
2. GitHub Pages base 路徑沒改
   • ❌ base: '/' → 部署子路徑 404
   • ✅ base: '/repo-name/'
3. Production build 路徑錯誤
   • 請務必用相對路徑或正確 base
4. 未處理 404
   • GitHub Pages 需要 404.html，可以直接複製 index.html。

下一步（Day 28 預告）

我們正式進入 React 實戰養成 🚀：

• 用 Vite + React + TypeScript 建立新專案
• 認識 JSX 與 Function Component
• 把履歷網站骨架（Header/Hero/About/Skills/Projects/Contact/Footer）搬進 React
• 準備好後，逐步做資料綁定、路由、表單、API、狀態管理（Redux/Context）