技術背景
資料庫工程師轉前端技術。所學從六角學院修習切版、 JavaScript 、 Vue 三種前端技術。

參賽初衷
所學至今跟著課程作業有作出一些網站前後台模板，為持續學習於是參加第 15 屆鐵人賽，從 Vue 主題試著用框架技術建構網站，從中複習切版、 JavaScript。

該系列文章核心
不從 Vue 基礎知識點分類介紹，著重於用 Vue3 建構一網站，參考網路共享資源跟著 Step-by-Step 練習實作。開發習慣會以六角學院所學為主，文章內會分享程式碼與各知識點。期望「試試用Vue建立網站吧」系列文章能協助剛學完 Vue 想練練手的前端小白（因 Vue 框架底層是 JavaScript 技術，建議有底子的小白服用）。

主題與學習目標
以虛擬集團餐廳會員網站為主題開發前後台頁面，練習使用框架進行關注點分離，即資料與畫面分離、資料與方法分離為概念開發，並嘗試加入 Pinia 跨元件狀態管理工具將元件統一管理。

開發工具介紹

• 作業系統：Windows 11（64 bit）
• 開發工具：Visual Studio（版本1.82.10）
  • Visual Studio 用到的套件 （後續有用到其他套件將於往後各篇補上）
    • Vetur：Vue 官方提供的 Vue 整合插件，能提示 Vue 語法錯誤處與校正建議。
    • Vue 3 Snippets：開發者透過縮寫，套件會自動展開成相應的 Vue 3 代碼結構，幫助開發者更快速地編寫代碼。
• JavaScript 框架：Vue 3（Options API寫法）
• Vue3 建構工具（預處理器）：Vite （需 Node.js 版本14.18以上。下載 LTS 長期穩定維護版本即可）
• 切版框架：Bootstrap 5

專案情境
以一餐飲集團為背景，提供集團會員紀錄喜愛的旗下餐廳與評論。前後台頁面的功能說明如下。

• 前台使用者頁面
  • 口袋餐廳：提供會員建立喜愛的集團餐飲品牌清單（即口袋餐廳）。會員具有新增與移除列表項目的權限。
  • 餐廳實評：根據口袋餐廳建立的清單，提供會員對其紀錄實際用餐體驗。會員具有新增與修改評論的權限。
• 後台管理者頁面
  • 管理餐廳列表：管理者具有新增與移除集團餐廳的權限。

注意：本系列每篇文章會以各功能頁面為篇名介紹，如何開發該功能頁面、建立相應 API （本系列旨在練習開發前端畫面。採用 json-server 方式建立簡單的 API ，不對後端邏輯 API 進行開發與說明）、路由表等。