用 Antigravity 開發時，怎麼同時開第 2、第 3 個視窗，並重新打開 Laravel 專案（餐廳比喻版）

用 Antigravity 開發：同時開第 2、第 3 個視窗，並重新打開 Laravel 專案（餐廳比喻版）

本文整理：如何在 Antigravity 同時分工（agent 跑任務、自己練習寫程式、重新打開 Laravel 專案），並用餐廳角色來幫助記憶。

這篇文章整理我在使用 Antigravity 做開發時，最常遇到的三件事：

1. 已經有一個視窗正在讓 agent 跑任務了，如何再開第 2、第 3 個視窗，讓我可以同時練習寫程式、做其他事情。
2. 如何把「之前的 Laravel 專案」重新打開並跑起來。
3. 如何用「餐廳分工」的方式，把視窗與工作切清楚，避免混亂。

一、先用餐廳分工想像你的開發環境

把 Antigravity 想成一間餐廳，你的工作通常同時在進行：

• 廚房：agent 正在跑任務（建置、測試、產生程式碼、整理資料）。
• 備料區：你在練習寫程式、試新語法、做小實驗。
• 接待台：你整理需求、記錄 TODO、對照錯誤訊息、問問題。

如果你把所有事情都塞在同一個視窗／同一個對話／同一個終端機，就像把「炒菜、切菜、接客」全部擠在同一個工作檯上，結果通常是：互相干擾、上下文混在一起、錯誤也更難追。

核心策略：正在跑任務的 agent 視窗不要動，另開新視窗來做練習和開發。

二、在 Antigravity 怎麼開第 2、第 3 個視窗

目標

• 視窗 1：專門給 agent 跑任務（不要亂碰）。
• 視窗 2：專門用來開啟 Laravel 專案、跑專案。
• 視窗 3：專門用來練習寫程式（安全試驗場）。

常見做法（通用概念）

在 Antigravity 的選單通常會有以下其中一種（名稱可能略有差異）：

• File／檔案 → New Window／新視窗：連按兩次就等於開第 2、第 3 個視窗。
• File／檔案 → Open Folder／開啟資料夾（或 Open Project／開啟專案）：選資料夾時若提示「在新視窗開啟」或「在目前視窗開啟」，就選 新視窗。

餐廳比喻：「開新視窗」就像在同一條街上再開一間分店，讓不同的員工各做各的事。

三、同一個視窗內也能分工：分割終端機與多個 Terminal

有時你不想開很多視窗，也可以在同一個 Antigravity 視窗裡做到分工：

• 開多個 Terminal 分頁（tabs）
• 使用 Split Terminal（分割終端機），變成左右或上下兩個終端機

很常見的配置是：

• Terminal A：跑 Laravel 後端（php artisan serve）
• Terminal B：跑前端（npm run dev）
• 編輯器：你改程式碼
• agent 面板：它繼續跑任務

四、用 Antigravity 重新打開「之前的 Laravel 專案」並跑起來

1）先確認你開到的是「專案根目錄」

你要開的資料夾，通常會包含以下關鍵檔案／資料夾：

• artisan
• composer.json
• app/
• routes/
• resources/

在 Antigravity：File → Open Folder／Open Project → 選到專案根目錄

2）在 Terminal 依序執行最常見啟動流程

以下是一個一般情況最常用的順序，你可以當成「開店 SOP」。

Step A：安裝後端套件（Composer）

composer install

比喻：後廚食材補齊。

Step B：安裝前端套件（NPM）

npm install

比喻：外場設備、菜單系統裝好。

Step C：建立環境設定檔 .env

macOS / Linux：

cp .env.example .env

Windows（PowerShell）：

copy .env.example .env

比喻：把店內規章複製一份，準備填水電瓦斯資料（資料庫等設定）。

Step D：產生 Laravel App Key（重要）

php artisan key:generate

比喻：裝上店門鑰匙與防偽鎖，Session / 加密才會正常。

Step E：資料庫遷移（需要時）

php artisan migrate

比喻：把餐廳桌椅與動線（資料表）擺好。

Step F：啟動後端伺服器

php artisan serve

比喻：正式開店，客人可以進門（常見網址：http://127.0.0.1:8000）。

Step G：前端熱更新（使用 Vite 時常見）

npm run dev

比喻：菜單看板即時更新（熱更新）。

五、推薦的「三視窗配置」：最不容易亂

視窗 1：給 agent 跑（廚房）

• 只做一件事：跑任務。
• 原則：不要在這個視窗做練習，不要混入其他問題。

視窗 2：跑 Laravel 專案（店面）

• Terminal A：php artisan serve
• Terminal B：npm run dev（需要時）
• 所有與「餐廳專案本體」相關的修改都在這裡做。

視窗 3：練習寫程式（試做區）

• 做小實驗、練語法、測想法都放這裡。
• 好處：不會污染主要專案，也不會打斷 agent 任務。

六、快速檢查清單（回顧用）

• [ ] 視窗 1：agent 任務繼續跑（不動它）
• [ ] 視窗 2：Open Folder 打開 Laravel 專案根目錄
• [ ] composer install
• [ ] npm install
• [ ] 建立 .env（從 .env.example 複製）
• [ ] php artisan key:generate
• [ ] php artisan migrate（需要時）
• [ ] php artisan serve
• [ ] npm run dev（需要前端熱更新時）
• [ ] 視窗 3：練習程式碼、試驗場

七、常見卡關（最短排查方向）

• composer install 很慢或失敗：常見原因是網路、PHP 版本、Composer 版本或套件相依性。
• php artisan serve 打開空白或 500：常見是 .env 設定、APP_KEY 沒產生、資料庫連線錯。
• php artisan migrate 失敗：資料庫沒建、帳密不對、或 migration 衝突。
• npm run dev 失敗：Node 版本不合、套件沒裝齊、或 lock 檔衝突。

結語：把 Antigravity 當餐廳經營，而不是只用一個工作檯。固定好視窗角色（廚房 / 店面 / 試做區），你的開發流程就會穩定、好回顧、也更不容易亂。

【第二篇】本機開發遇到 Vite 錯誤：小白一步步排查指南

【第二篇】本機開發遇到 Vite 錯誤：小白一步一步完全排查指南

適用：本地使用 php artisan serve 出現 ViteManifestNotFoundException

步驟

1. 開 Terminal
2. cd 到專案
3. npm install
4. npm run dev
5. 刷新網頁

---

【第一篇】什麼是 ViteManifestNotFoundException？用人話解釋

【第一篇】ViteManifestNotFoundException 到底在說什麼？

如果你正在學 Laravel，然後突然跳出一個：

ViteManifestNotFoundException

到底在共三小？

其實它的意思超簡單：

Laravel 找不到「前端打包好的檔案」

換成人話兩種原因：

1. 未執行 npm run dev
2. 上線時沒執行 npm run build

Laravel：我要找前端檔案！
你：我忘記開 Vite / 忘記打包
Laravel：報錯讓你知道！

下篇告訴你怎麼修好。

文組生也能學會寫程式：用 Cursor 幫你看懂程式碼，開啟你的自學之路

很多人以為程式只有理工科才能接觸，但我想告訴你：文組生也完全可以寫程式，而且可以寫得很好。
你需要的不是天賦，而是正確的學習方法與工具。

在我自學與教學的過程中，我發現一個強大的工具 —— Cursor。它能幫你把看不懂的程式碼，用最白話的方式解釋給你聽。這也讓我決定把這些經驗整理成文章，未來希望能開課，帶更多人踏進程式世界。

為什麼文組生也能靠 Cursor 開始寫程式？

如果你是文組背景，可能會遇到兩個痛點：

• 看不懂程式碼在做什麼
• 網路教學講得太難、太抽象

而 Cursor 解決的正是這兩個問題。

Cursor 是一個結合 AI 的程式開發工具，它可以：

• 把程式碼翻譯成白話文，像有老師坐在你旁邊講解。
• 讀懂你的專案整體脈絡，比一般 ChatGPT 更準確。
• 幫你找錯誤、給解法，讓你學得更快。
• 甚至生成技術文件或教學內容，協助你整理學習。

這對沒有程式基礎的人來說，就是最佳的起點。

讓我示範：Cursor 怎麼把程式碼講到你聽得懂？

以下是一小段常見的 Laravel 程式碼：

public function store(Request $request)
{
    $request->validate(['task' => 'required']);
    Auth::user()->todos()->create($request->all());
    return redirect()->route('todos.index');
}

文組同學看到這段可能會想：「這是什麼。」 但如果你用 Cursor 的 Explain Code，它會告訴你：

• 這段程式碼負責「新增一筆代辦事項」。
• 先驗證你有輸入 task。
• 拿到登入者的資料，把代辦事項記錄到資料庫。
• 最後導回列表頁。

瞬間，你就能理解這段程式碼的邏輯。

Cursor 是你學習程式的加速器，而不是作弊工具

很多人誤會 AI 是用來取代思考的，但其實最有價值的，是：

• AI 幫你簡化理解難度
• 你保留程式邏輯的學習成長

就像一個會把艱深內容「翻譯成你懂的語言」的私人家教。

寫這篇文章的目的：我正在準備開課（文組生／零基礎友善）

我正在整理一系列內容，未來打算開課，專門帶：

• 文組生
• 零基礎自學者
• 跨領域想轉職的人

課程內容會以「看得懂 → 寫得出 → 解決問題」為主軸，不會用艱澀的專有名詞轟炸你，而是帶你：

• 用白話理解每段程式碼
• 用 Cursor 減輕學習痛苦
• 一步一步完成你的第一個作品

如果你覺得程式語言都像外星文字，那這堂課就是為你設計的。

為什麼我寫部落格？因為我希望你看到我的教學風格

寫這些文章不只是一種分享，也是讓你認識：

• 我的教學方式
• 我的解釋能力
• 我如何用工具協助學習

未來你會在這個部落格看到更多：

• 白話解釋框架（例如 Laravel、Node.js）
• 自學指南
• AI 工具輔助學程式的方法
• 新手也能看得懂的技術圖解

如果你願意跟著我一步一步開始，你會發現寫程式沒有你想得那麼難。

最後想對你說…

程式不是天才的專利。它只是一種語言，而 Cursor 會幫你把它翻成你聽得懂的中文。

你只需要願意開始，剩下的我會陪你邁過去。

---

如果你希望我開更完整的系列文章、影片，甚至想加入未來課程的搶先名單，都可以留言告訴我。

Laravel 路由完全攻略：從零開始理解網站的導航系統

🚀 網站開發核心：超簡單理解 Laravel 路由系統 (Route)

## 前言：為什麼路由這麼重要？

如果你剛開始學習網站開發，「路由」這個詞可能聽起來很陌生。但其實，你每天都在使用路由——只是你沒有意識到而已。

當你在瀏覽器輸入 facebook.com/profile 的時候，Facebook 是怎麼知道要顯示你的個人資料頁面，而不是首頁呢？答案就是：路由。

今天，我要用最簡單的方式，帶你徹底理解 Laravel 框架中的路由系統。不管你是文組背景還是完全沒有程式經驗，看完這篇文章後，你都能輕鬆掌握路由的核心概念！

---

## 一、路由是什麼？用生活例子來理解

🏢 想像你走進一棟大樓

假設你今天去一棟辦公大樓找朋友，你會怎麼做？

1. 走進大樓大門
2. 看指示牌：「3樓 - 會議室」「5樓 - 人資部」「7樓 - 工程部」
3. 根據指示牌，搭電梯到對應樓層
4. 找到你要去的地方

網站的路由，就是這棟大樓的指示牌！

使用者輸入網址（走進大樓）
    ↓
路由系統判斷（看指示牌）
    ↓
導向對應的功能（搭電梯到對應樓層）
    ↓
顯示正確的頁面（找到目的地）

📮 另一個比喻：郵局分信員

你也可以把路由想像成郵局的分信員：

• 信件 = 使用者的請求
• 地址 = 網址 URL
• 分信員 = 路由系統
• 收件人 = 控制器/功能

分信員看到信件上的地址，就知道要把信送到哪裡。路由系統看到網址，就知道要執行哪個功能。

---

## 二、Laravel 路由的基本語法

最簡單的路由長這樣

打開 routes/web.php 檔案，你會看到類似這樣的程式碼：

Route::get('/', function () {
    return '歡迎來到我的網站！';
});

讓我們拆解這段程式碼：

部分	意思	比喻
Route::get()	處理 GET 請求	「有人想看東西」
'/'	網址路徑（首頁）	「大樓的 1 樓大廳」
function () { ... }	要執行的動作	「櫃檯人員的工作」
return '...'	回傳給使用者的內容	「給訪客的回應」

更多路由範例

// 首頁
Route::get('/', function () {
    return view('welcome');  // 顯示歡迎頁面
});

// 關於我們頁面
Route::get('/about', function () {
    return view('about');  // 顯示關於頁面
});

// 聯絡我們頁面
Route::get('/contact', function () {
    return view('contact');  // 顯示聯絡頁面
});

對應的網址：

• http://你的網站.com/ → 首頁
• http://你的網站.com/about → 關於我們
• http://你的網站.com/contact → 聯絡我們

---

## 三、HTTP 方法：不只是「看」，還有「做」

🎬 想像你在餐廳點餐

在餐廳裡，你會做不同的動作：

動作	對應的 HTTP 方法	程式碼
看菜單	GET	Route::get()
點餐	POST	Route::post()
改訂單	PUT / PATCH	Route::put()
取消訂單	DELETE	Route::delete()

實際程式碼範例

// 看所有文章（GET = 獲取資料）
Route::get('/posts', function () {
    return '顯示所有文章列表';
});

🚀 Cursor Auto-Run 完整指南：為什麼已開啟卻不會自動執行？（含真正能自動跑的方法）

Cursor 是目前最強大的 AI 程式編輯器之一，其中 Agent Auto-run 是許多使用者最期待的功能：讓 AI 在你下指令後，自動執行任務、修改程式或重構檔案。

不過，很多人明明在 Cursor 設定中看到 Auto-run 已經「綠燈 ON」，卻還是遇到：

• 每次下指令，系統仍然要求「按下 Run」
• Cursor 顯示 Auto-run 啟用，但 Agent 一動也不動
• Chat 視窗跟 Agent 視窗行為不一致

本文會說明：

1. Auto-run 其實是什麼
2. 為什麼開了還是不會跑
3. 要怎麼讓 Cursor 真正做到「自動執行」
4. 實務上推薦的使用套路

🔍 Auto-run 是什麼？（很多人誤解了）

Cursor 的 Auto-run（自動執行） 並不是「讓 AI 自動執行所有聊天指令」。它真正的意思是：

當你呼叫 Agent 指令（例如 @agent / @cursor）時，Cursor 會自動執行，不需要你再按一次 Run。

因此 Auto-run 不會：

• 自動執行一般聊天對話
• 自動執行模糊的自然語言敘述（例如「幫我改一下 code」）
• 在你沒有明確操作的情況下修改檔案

Cursor 的設計理念是：避免 AI 自動破壞你的專案，所以保留這層安全機制。

❗ 為什麼 Auto-run 開啟，Cursor 卻仍然不會自動跑？

原因一：你給的是 Chat 指令，而不是 Agent 指令

Cursor 其實有兩種互動模式：

模式	是否會 Auto-run？	用途
Chat（普通聊天）	❌ 不會	問問題、請 AI 解釋、討論架構
Agent（使用 @agent / @cursor 指令）	✔ 會	修改程式碼、執行任務、重構專案

例如：

幫我重構一下 login function

這是普通聊天指令 → Auto-run 不會啟動。

@agent 重構 login function，並修正 TypeScript 型別

這是 Agent 指令 → 開啟 Auto-run 時會自動執行。

原因二：你不在「Agent 面板」，而是在 Chat 面板

左側的 「∞ Agent」 面板才是 Agent 執行區；右側像 ChatGPT 的聊天框只是問答，不會幫你動手改專案。若你只在聊天視窗輸入文字，就算 Auto-run 開啟了，也看不到任何「自動執行」。

原因三：安全保護機制限制「完全自動」操作

為了避免 AI 自動破壞程式，Cursor 官方刻意不允許「所有指令自動執行」。任何對檔案的更動，都必須透過 Agent 或由你按下 Run/Apply 來確認。

✔ 如何讓 Cursor 真正做到「接近全自動」？

想讓 Auto-run 實際發揮效果，可以照以下三個步驟設定。

步驟一：改用 @agent / @cursor 下指令（最關鍵）

從現在開始，只要你希望 AI「動手」修改程式，就用 Agent 的格式：

@agent 請優化這段函式，降低時間複雜度

@cursor 修復 main.py 中的錯誤，並加上單元測試

只要 Auto-run 開著，這類指令會自動執行，不需要再按任何按鈕。

步驟二：確認 Auto-run 已開啟

1. 在 Cursor 中按 Ctrl + I 開啟 Agent 設定。
2. 確認：
   • Model 已選擇（例如 GPT-4o / GPT-5 等）。
   • Auto-run 開啟，顯示綠色。

步驟三：在 Agent 面板中操作，而不是純聊天視窗

建議把「寫程式 + 下 @agent 指令」都放在 Agent 面板進行。這樣你每輸入一個 @agent 指令，Auto-run 就會幫你自動跑，流程會非常流暢。

⭐ 推薦工作流：讓 Auto-run 真正幫你省時間

以下是一個實用的 Cursor Auto-run 工作流範例：

1. 在檔案中寫一部分程式/草稿。
2. 選取相關程式碼或直接在檔案下方輸入：

@agent 重構這段程式碼，讓結構更清楚，並加上必要註解

3. Auto-run 自動執行，產生修改建議並套用。
4. 檢查結果，如果不滿意，再用下一個 @agent 指令微調。

也可以用在整個專案層級的任務，例如：

@agent 將專案中所有同步 API 呼叫改成 async/await，並更新錯誤處理邏輯

🧩 常見問題（FAQ）

Q1：可以讓 Cursor 完全不問，我一打字就直接改檔嗎？

目前不行。基於安全與穩定性，Cursor 不提供「對所有聊天訊息完全自動執行」的模式，你仍然需要透過 Agent 指令或手動確認。

Q2：那怎樣算是「最接近完全自動」？

最好的做法是：養成所有實際動手的需求，都用 @agent / @cursor 開頭。在這個前提下，開啟 Auto-run，實際使用體感就會非常接近「我講一句，它馬上跑」。

🏁 結論：Auto-run 沒生效，大多是使用方式的問題

總結一下，要讓 Cursor Auto-run 真正發揮作用，你需要：

• 使用 @agent / @cursor 指令，而不是純聊天句子。
• 在 Agent 面板 操作，而不是一般 Chat 視窗。
• 在設定中確認 Auto-run = ON。

設定好這三點後，Cursor 就能成為一個幾乎全自動的 AI 程式助手：你負責描述需求，它負責讀檔、改 code、回報結果。

從本機到 GitHub：我如何理解 Git 的核心邏輯並成功推送專案

從本機到 GitHub：我如何理解 Git 的核心邏輯並成功推送專案

在正式使用 Git 與 GitHub 之前，我對它們的理解僅止於「版本控制」與「放程式碼的地方」。但當我真正嘗試將本機專案推送到 GitHub 時，才發現整個流程包含版本管理、狀態追蹤、身分驗證等多層邏輯，並不是簡單的複製貼上。

這篇文章記錄了我成功推送專案的過程，並以「作業管理系統」的比喻重構 Git 的核心概念，讓整個流程更直覺、更具體。希望這篇文章能幫助同樣正在學 Git 的開發者更快建立正確理解。

一、推不上 GitHub 的關鍵原因：身分驗證

當我第一次輸入：

git push -u origin main

VS Code 並沒有立即推送，而是跳出 GitHub 登入視窗，要求完成身分驗證：

此視窗的意思是：「你尚未登入 GitHub，因此無法推送到遠端 Repository。」

我點選 Sign in with your browser → GitHub 開啟 →登入 → Authorize Visual Studio Code → 回到 VS Code，push 指令便自動繼續執行並成功。

二、用「作業管理系統」理解 Git 的三大區域

許多初學者被 Git 弄得不知所措，其實大部分的混亂都來自於不了解 Git 的「三個工作區域」。我後來用「作業紙 → 資料夾 → 作業簿」的方式理解後，整體架構瞬間變得非常清晰。

1. Working Directory（工作目錄）＝ 正在撰寫的作業紙

電腦上正在修改的檔案（例如 .php、.js、.md）都屬於工作目錄，就像你桌上攤開的作業紙，隨時可修改，還不是正式版本。

2. Staging Area（暫存區）＝ 已整理好準備提交的資料夾

當我執行：

git add .

這相當於把所有「準備要交的作業」收進一個透明文件夾。

Git 會把這些加入暫存區的內容視為「下一次正式提交的候選版本」。這是從工作目錄進入正式版本紀錄前的必要步驟。

3. Commit（提交）＝ 作業簿上的正式蓋章

執行：

git commit -m "提交說明"

這代表 Git 將暫存區的內容封存為一個永久版本（snapshot），就像老師在作業簿上蓋章，寫上本次內容標題。

之後每個版本都能被查閱、比對、還原，是 Git 的核心價值所在。

4. Remote Repository（遠端版本庫）＝ 老師辦公室的作業櫃

執行：

git remote -v

若出現：

origin https://github.com/youcan689/needPutCenter.git

代表本機作業簿已經知道：「未來的版本要推送到這個 GitHub 的櫃子（origin）。」

三、git status：整個系統的狀態儀表板

無論你在做什麼動作，git status 永遠是最重要的一步，它能告訴你：

• 桌上是否有未整理的作業紙（modified）
• 是否有未登記的新作業（untracked）
• 暫存區是否有尚未提交的內容
• 作業簿是否已完整蓋章（working tree clean）

1. 若看到 modified / untracked files

表示仍有內容尚未整理，下一步應執行：

git add .
git commit -m "提交說明"

2. 若看到 working tree clean

nothing to commit, working tree clean

代表所有修改都已被提交，且沒有任何額外變更。此時你可以安全地進行 push。

四、git push -u origin main 的專業含義

這行指令可拆解為三個部分：

• push： 推送版本至遠端版本庫
• origin： 指定遠端主機的位置
• -u： 建立「本機 main 分支」與「遠端 origin/main」的追蹤關係

-u 的作用更值得特別說明：

它讓 Git 記住：「未來本機的 main 分支，都要推送到 origin 的 main 分支。」

建立這個 tracking relationship 後，之後只需輸入：

git push

即可自動推送，非常方便。

五、成功推送至 GitHub：版本正式上線

完成登入後，push 重新執行，看到以下訊息：

To https://github.com/youcan689/needPutCenter.git
branch 'main' set up to track 'origin/main'.

打開 GitHub 頁面：

https://github.com/youcan689/needPutCenter

即可看到完整專案已成功推送。

六、Git 心法總結（專業又好記）

• git status：檢查狀態的核心指令
• git add：將修改加入暫存區
• git commit：建立正式版本快照
• git remote：確認遠端設定
• git push -u origin main：第一次推送並建立追蹤
• git push：之後的快速同步

結語：從指令，到理解背後邏輯

這次的實作讓我真正理解 Git 的運作方式，包括：

• 狀態 → 暫存 → 提交 → 推送 的完整流程
• 如何解決 GitHub 身分驗證問題
• 如何透過比喻建立直覺化系統思維

Git 不只是個工具，而是一套完整的版本管理系統。當理解其概念後，所有動作都會變得自然而順暢。

希望這篇文章能讓你在學習 Git 的路上少走一些彎路。如果你有自己的理解方式，歡迎留言交流！