AI 原生开放教材

外观

VibeFast 文档官方文档·英文原文 ↗原件 ↓仓库 ↗

開始 Vibe Coding：從零設定你的開發環境 ​

English · 繁中 · Español · 日本語 · Português (BR)

作者： Danko Peng（@dankopeng）
更新： 2026 年 3 月
閱讀時間： 約 10 分鐘

這篇做完，你的環境就設定好了 ​

很多人在這一步卡住——不是因為太難，而是不知道要做什麼、按什麼順序做。

這篇把所有前置條件一步一步說清楚。跟著做完，你就有一個完整的 Vibe Coding 開發環境，而且 vibefast.app 已經部署到 Cloudflare 上跑起來了。

需要安裝的東西：Node.js、Git、Cursor。需要做的事：clone repo、npm install、npm run setup。就這些。

第一步：安裝 Node.js ​

Node.js 是讓你的電腦能跑 JavaScript 的環境。沒有它，npm 和 npx 都不能用。

前往 nodejs.org，下載 LTS 版本（Long Term Support，長期支援版）。

安裝完之後，打開終端機確認：

bash
node --version
# 應該看到類似 v22.0.0 的版本號

npm --version
# 應該看到類似 10.0.0 的版本號

看到版本號就代表安裝成功。

先說一下終端機 ​

如果你對終端機（黑色視窗）不熟悉，先不要怕它。

Mac：按 Cmd + Space，搜尋「Terminal」，打開就是了。
Windows：搜尋「PowerShell」或安裝 Windows Terminal。

終端機就是一個讓你用文字指令和電腦溝通的地方。你在這裡輸入指令，電腦執行。整個 Vibe Coding 的開發流程，大概有一半的操作在這裡完成。

npm 和 npx 是什麼？（30 秒說清楚） ​

npm（Node Package Manager） 是 JavaScript 的套件管理工具。全世界的開發者把自己寫的工具和函式庫放在 npm 倉庫，你可以免費下載使用。

bash
npm install stripe   # 下載 Stripe 套件到你的專案
npm run dev          # 跑 package.json 裡定義的 dev 指令

npx 是直接執行一個工具，不需要先安裝它：

bash
npx wrangler deploy  # 直接執行 wrangler，不需要先 npm install

記住這兩個就夠了。遇到其他 npm 指令，讓 AI 解釋。

第二步：安裝 Git ​

Git 是版本控制工具，讓你能 clone 別人的 repo、追蹤自己的 code 變更。

Mac：終端機輸入：

bash
git --version

如果 Mac 還沒裝 Git，系統會自動提示你安裝 Xcode Command Line Tools，按照提示安裝就好。

Windows：前往 git-scm.com 下載安裝。

安裝完確認：

bash
git --version
# 應該看到類似 git version 2.40.0

第三步：申請 Cloudflare 帳號 ​

前往 cloudflare.com 免費註冊帳號。

vibefast.app 部署在 Cloudflare 上，你需要一個帳號才能完成 setup。免費方案的額度對起步的 app 完全夠用。

開通 R2 使用權限（需要信用卡） ​

vibefast.app 使用 Cloudflare R2 來儲存檔案和圖片。R2 預設是關閉的，需要手動開通，而且開通時 Cloudflare 會要求你綁定信用卡。

步驟：

  1. 登入 Cloudflare Dashboard
  2. 左側選單點選 R2
  3. 點選「Purchase R2 Plan」或「Enable R2」，按照頁面指示輸入信用卡資訊

輸入信用卡後不會立刻扣款。 R2 每月提供免費額度（10 GB 儲存空間、100 萬次讀取操作），在免費額度內不會產生任何費用。信用卡的用途是身份驗證，以及超出免費額度時才計費。對於剛起步的 app，完全不需要擔心費用問題。

第四步：Clone vibefast.app ​

買了 vibefast.app 之後，你會收到 private repo 的 collaborator 邀請。接受邀請，然後在終端機執行：

bash
git clone https://github.com/vibefast-app/vibefast.git my-app
cd my-app

git clone 把整個 repo 複製到你的電腦，cd my-app 進入那個資料夾。

第五步：npm install ​

bash
npm install

這個指令讀取專案的 package.json，把所有需要的套件下載到 node_modules 資料夾。

第一次跑可能需要幾分鐘，看到完成訊息就好了。

為什麼要跑這個？
node_modules 這個資料夾很大（幾百 MB），不會放在 GitHub 上。每次 clone 一個新專案，都要先跑 npm install 把套件下載回來。

第六步：npm run setup ​

bash
npm run setup

這是整個流程最神奇的一步。

加上前面的 clone 和 install，你總共只需要三個指令：

bash
git clone https://github.com/vibefast-app/vibefast.git my-app
cd my-app && npm install
npm run setup

npm run setup 會自動完成所有事：

  1. 引導你登入 Cloudflare 帳號
  2. 建立 D1 資料庫，執行 bootstrap SQL
  3. 自動生成 JWT secret，寫入 Cloudflare 環境變數
  4. 把前端和後端兩個 Workers 同時部署到正式環境

跑完之後，你的 app 已經在 Cloudflare 全球 300+ 個節點上跑起來了。從 clone 到全球上線，三個指令，幾分鐘內完成。

終端機會顯示你的 app URL，打開瀏覽器確認一下。

第七步：安裝 Cursor ​

Cursor 是目前最主流的 AI 編輯器，Vibe Coding 的核心工具。

Cursor 是付費軟體，每月 $20。 註冊後可以免費試用 7 天，試用期間功能完整，不需要填信用卡。7 天之後決定要不要繼續訂閱。

前往 cursor.com 下載安裝，用 email 註冊帳號，開始 7 天試用。

安裝完之後，用 Cursor 打開你的專案：

bash
cursor .

或者在 Cursor 裡選 File → Open Folder，選你的 my-app 資料夾。

打開之後，按 Cmd+L（Mac）或 Ctrl+L（Windows）打開 AI 對話框。試著輸入：

這個專案是什麼結構？幫我解釋一下主要的資料夾和檔案。

Cursor 會分析你的整個專案，告訴你每個部分是幹什麼的。

本地開發 ​

環境設定好之後，之後每次開發：

bash
npm run dev

這會在本地啟動開發伺服器，打開 http://localhost:5173 就能看到你的 app。

本地修改 → 確認沒問題 → npm run deploy 部署到正式環境。

這是基本的開發循環。

你現在有了什麼 ​

做完這七步，你有：

  • ✅ Node.js 和 npm 安裝好
  • ✅ Git 安裝好
  • ✅ Cloudflare 帳號
  • ✅ vibefast.app 部署到正式環境，全球可以訪問
  • ✅ Cursor 安裝好，可以開始 Vibe Coding

接下來，繼續讀下一篇，開始學怎麼用 Vibe Coding 做出你想要的功能。

看不懂 Code 怎麼辦？ ​

環境設定好之後，你會開始看到很多不熟悉的 code——TypeScript 的型別標註、async/await、JSX 語法……

不需要先學會這些才能開始。 這就是 Vibe Coding 的核心：

遇到看不懂的 code，直接在 Cursor 裡問：

解釋一下這段 code 在做什麼，用白話說

遇到不知道什麼意思的語法，直接問：

async/await 是什麼意思？為什麼要用它？

遇到紅色錯誤訊息，直接複製貼給 AI：

我遇到這個錯誤：[貼上錯誤]
這是我的 code：[貼上 code]
幫我解釋原因和怎麼修

你不需要先讀完所有教程才能動手。邊做邊問，遇到不懂的就問，這是最快的學習方式。

Danko Peng
X · YouTube · Threads

👉 回到教程首頁

想直接上手完整的 Cloudflare 全棧模板？
👉 vibefast.app — 早鳥 $99，2026 年 8 月 1 日漲至 $199。