2025-07-28 Line 訂單系統- 要開始「第一塊積木」，建立三台電腦的「完整 Setup 操作手冊」

發表於 2025-11-17 分類於 OneDayOneNote 閱讀次數：

建立三台電腦的「完整 Setup 操作手冊」

以下是一份你能直接照做、不會出錯、一步一步完成環境安裝與專案初始化的
📘 三台 notebook 完整 Setup 操作手冊（超詳細版）

這份手冊包含：

MacBook Air #1 → 後端（NestJS 主機）
Lenovo Windows → MySQL + Redis + API 測試主機
MacBook Air #2 → 前端（Vue3 管理後台 + 文件機）

🚀 三台 Notebook 完整 Setup 操作手冊（最新版）

格式採用「照做就成功」的方式書寫。

———————————————————-

🍎 MacBook Air #1（後端主力）NestJS 開發環境 Setup

———————————————————-

🔧 1. 安裝 Homebrew（如果沒有）

打開 Terminal：

1	/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

接著執行：

brew -v

看到版本號即可。

🔧 2. 安裝 Node.js（建議 LTS）

1
2
3

brew install node
node -v
npm -v

🔧 3. 安裝 Nest CLI

1 2	npm i -g @nestjs/cli nest --version

出現版本號即成功。

🔧 4. 建立 Backend 專案資料夾

1
2
3

mkdir line-order-backend
cd line-order-backend
nest new backend

選 npm / yarn 皆可。

🔧 5. 初始化 Git 並連接 GitHub

git init
git add .
git commit -m "init backend"
git branch -M main
git remote add origin https://github.com/<你的帳號>/line-order-backend.git
git push -u origin main

🔧 6. 安裝必要套件（未來使用）

1 2	cd backend npm install @nestjs/config class-validator class-transformer mysql2 prisma

（之後你會用 Prisma 接 MySQL）

🔧 7. 啟動後端測試

1	npm run start:dev

如果看到：

1	Nest application successfully started

恭喜 🎉
你的 後端主力環境完成。

———————————————————-

🖥️ Lenovo Windows（MySQL + Redis + API 測試）環境 Setup

———————————————————-

🗄️ 1. 安裝 MySQL 8.0

下載 MySQL Installer：

1	https://dev.mysql.com/downloads/installer/

安裝時選：

MySQL Server 8.0
MySQL Workbench

設定：

root 密碼：自己設定
Port：3306（保持預設）

🗄️ 2. 建立資料庫 line_order_system

進 MySQL Workbench：

1	CREATE DATABASE line_order_system;

🗄️ 3. 匯入 db_init.sql

在 Workbench：

File → Run SQL Script → 選擇你的 db_init.sql
Run

完成後會出現 products、orders 等基本表。

🗄️ 4. 安裝 Redis（後面 D 階段用）

到 Microsoft Store：

搜尋 Redis
點「Install」

啟動：

1	redis-server

🗄️ 5. 安裝 API 測試工具（Postman 或 VS Code Plugin）

Postman：

1	https://www.postman.com/downloads/

或 VS Code 安裝：

Thunder Client（更輕量）

🗄️ 6. 測試後端是否可連線（當 MacBook Air #1 正在跑 Nest）

例如你開發機 IP 是：

1	192.168.0.15

在 Windows Postman：

1	GET http://192.168.0.15:3000

如果收到結果 → 成功 🎉
表示 Windows 能測試後端 API。

———————————————————-

🍎 MacBook Air #2（前端 Vue3 + 文件）環境 Setup

———————————————————-

🔧 1. 安裝 Node.js（若尚未安裝）

1	brew install node

🔧 2. 建立前端 repo

1
2
3

mkdir line-order-frontend
cd line-order-frontend
npm create vite@latest

選：

Vue
JavaScript（或 TypeScript）

🔧 3. 安裝 UI Toolkit（用於後台管理系統）

之後可能會使用：

1
2
3

npm install element-plus
npm install axios
npm install pinia

🔧 4. 初始化 Git 並推到 GitHub

git init
git add .
git commit -m "init frontend"
git branch -M main
git remote add origin https://github.com/<你的帳號>/line-order-frontend.git
git push -u origin main

🔧 5. 啟動前端

1	npm run dev

用瀏覽器開啟：

1	http://localhost:5173

🔧 6. 前端測試呼叫後端 API

例如：

1	axios.get("http://192.168.0.15:3000/products")

成功顯示資料表示：

前端 → Lenovo Windows（DB）→ Mac #1（後端）
整個架構串起來了 🎉

———————————————————-

🧱 三台 Notebook 的工作職責總表

———————————————————-

電腦	角色	任務	技術
MacBook Air #1	主力後端	NestJS、Webhooks、API、Prisma、Redis Client	Node.js、NestJS
Lenovo Windows	資料庫＋測試主機	MySQL、Redis、Postman 測試、DB 工具	MySQL / Redis
MacBook Air #2	前端＋文件機	Vue3、UI/UX、文件、前端測試	Vue3、Vite、Element Plus

———————————————————-

🎯 最重要的下一步（請你確認）

———————————————————-

你已完成 Setup 了，但接下來你要開始「第一塊積木」：

✅ NestJS：Products 模組（Module + Controller + Service + DTO）

我可以馬上提供：

✔ 完整程式碼

✔ 建立指令

✔ 資料夾結構

✔ 每行程式的解釋

✔ 完整測試 API 方法

你要我現在直接開始 「第一塊積木 Products Module」教學＋程式碼」 嗎？