專案概述
以 Vibe Coding 為主加上手動微調製作的簡易形象網站，包含使用 Nuxt 3 開發的前台網站、Vue 3 管理後台，以及 Express.js 開發的 RESTful API。支援動態內容管理、SEO 最佳化、產品管理等功能。
技術挑戰與解決方案
SEO 最佳化
形象網站需要良好的搜尋引擎排名，傳統 SPA 難以滿足 SEO 需求。
解決方案：
採用 Nuxt 3 的 SSG 模式，自動生成 Sitemap，實作動態 meta 標籤和結構化資料。
內容管理系統
需要讓非技術人員能夠輕鬆管理網站內容和產品資訊。
解決方案：
開發直觀的管理後台，支援所見即所得編輯器，圖片上傳，產品管理等功能。
系統架構
前台使用 Nuxt.js 3 進行 SSG 靜態生成，管理後台採用 Vue.js SPA，後端 API 使用 Node.js + Express.js 框架，MySQL 資料庫，整合 Google reCAPTCHA 安全防護。
學習與心得
通過這個專案掌握了現代化的前端開發工作流程，深入理解了 SSG 的優勢和 SEO 最佳化技巧。同時也提升了全端開發的能力，學會了如何設計易用的管理介面。
技術棧
前台
Nuxt.js 3Tailwind CSSTypeScript
後台
Vue.jsElement PlusAxios
後端
GoGinMySQLJWTGORM