[GitHub Global] Translate Vibe Coding 零基础教程/01 快速上手 Vibe Coding.md to zh-TW

2026-02-05 14:45:04 +00:00
parent 0cd7c3b706
commit 2ecdbfad22
1 changed files with 372 additions and 0 deletions
@@ -0,0 +1,372 @@
+# 快速上手 Vibe Coding
+
+> 10 分鐘做出你的第一個網頁應用並部署上線
+
+
+
+你好，我是程式員魚皮，前騰訊全端開發，全網 200 萬粉的 [AI 編程博主](https://space.bilibili.com/12890453)，也是 [AI 導航](https://ai.codefather.cn) 和 [編程導航](https://www.codefather.cn) 等 10+ 自研產品的創造者。
+
+在上一篇文章中，我們聊了 Vibe Coding 的理念和思維方式。現在，是時候動手實踐了！
+
+這篇文章，我會手把手帶你在 10 分鐘內做出你的第一個網頁應用，並且把它部署到網際網路上，讓全世界的人都能訪問。
+
+是的，你沒聽錯，不需要你有任何編程基礎，只要你會打字、會上網，就能跟著做。
+
+
+
+## 一、準備工作
+
+在開始之前，我們需要做一些簡單的準備。別擔心，這些都很簡單，5 分鐘就能搞定。
+
+需要準備的東西：
+
+1. 一台能上網的電腦（Windows、Mac 都可以）
+2. 一個瀏覽器（Chrome、Edge、Safari 都行）
+3. 一個 AI 工具帳號（我們用 Bolt.new，免費的）
+4. 一個 GitHub 帳號（用來部署，也是免費的）
+
+就這些，不需要安裝任何編程軟體，不需要學任何程式碼，一切都在瀏覽器裡完成。
+
+💡 什麼是 GitHub？
+
+[GitHub](https://github.com/) 是目前最主流的、免費的程式碼開源託管平台 ，可以理解為一個儲存和管理程式碼的 “網盤”。所有用戶或團隊都可以把自己的程式碼上傳到 GitHub 進行共享和維護、從 GitHub 下載程式碼等。開發者們可以從 GitHub 上白票程式碼，進行學習或引用。
+
+如果你對 GitHub 感興趣，可以看 [魚皮的保姆級 GitHub 學習路線](https://www.codefather.cn/course/1789189862986850306/section/1789190804671012866) 免費學習。
+
+
+
+### 如何選擇 AI 工具？
+
+對於完全零基礎的新手，我強烈推薦從 Bolt.new 開始。它完全在線，不需要安裝任何軟體，打開瀏覽器就能用。而且最棒的是，你寫完程式碼立刻就能看到效果，做完後一鍵發布到網上，完全零門檻。還有免費額度，夠新手練習了。
+
+等你熟練了，再去學習 Cursor 這樣的專業工具也不遲。
+
+注意，如果你的網路無法訪問 Bolt.new，也可以嘗試 [美團 NoCode](https://nocode.cn/) 或者 [百度秒噠](https://www.miaoda.cn/)，都是類似的 AI 應用生成平台。
+
+
+
+### 註冊 Bolt.new
+
+1）打開瀏覽器，訪問：https://bolt.new
+
+2）點擊右上角的 "Sign in" 按鈕
+
+3）可以選擇用 Google 帳號 / GitHub 帳號 / 郵箱密碼登錄（推薦用 GitHub，後面部署會用到）
+
+登錄成功後，準備工作就完成了。接下來你就可以在對話框中輸入需求來生成項目了。
+
+![](https://pic.yupi.icu/1/image-20260104140815455.png)
+
+
+
+## 二、選擇你的第一個項目
+
+第一個項目很重要，它直接決定了你的學習體驗。我建議選擇一個簡單但完整的項目，最好有實際用處，能看到效果。
+
+根據我的經驗，下面這幾個項目比較適合新手，都是能輕鬆完成的。
+
+1）個人名片網頁：展示你的名字、頭像、自我介紹和聯繫方式，簡潔美觀。適合想快速體驗成就感的朋友。
+
+2）待辦事項應用：一個簡單的任務管理工具（俗稱 Todo List），可以添加任務、標記完成、刪除任務。適合想做點兒實用工具的朋友。
+
+3）倒計時網頁：可以設置目標日期（比如考試、生日），實時顯示剩餘天數，有漂亮的視覺效果。適合想做點有創意的東西的朋友。
+
+在這篇教程中，我會以經典的 **待辦事項應用** 為例，因為它功能完整、實用性強，而且能讓你體驗到完整的開發流程。如果你想做其他項目也完全沒問題，步驟是一樣的，只需要把需求描述換成你想要的就行。
+
+
+
+## 三、和 AI 對話生成程式碼
+
+好了，現在開始最激動人心的部分 —— 和 AI 對話，讓它幫你生成程式碼。
+
+
+### 第 1 輪對話：描述基本需求
+
+在 Bolt.new 的聊天框裡，輸入以下內容（你可以直接複製）：
+
+```
+請幫我做一個待辦事項應用網頁，要求：
+
+1. 功能需求：
+   - 可以輸入任務內容並添加到列表
+   - 每個任務前面有個複選框，點擊可以標記完成
+   - 已完成的任務顯示刪除線
+   - 每個任務後面有刪除按鈕
+   - 顯示已完成和未完成的任務數量
+
+2. 界面要求：
+   - 簡潔現代的設計風格
+   - 使用清新的藍色調
+   - 圓角按鈕和輸入框
+   - 適當的陰影效果
+   - 響應式設計，手機上也能正常使用
+
+3. 技術要求：
+   - 使用 HTML + CSS + JavaScript
+   - 數據保存在瀏覽器本地存儲，刷新頁面不會丟失
+```
+
+你還可以選擇大模型、使用計劃模式、添加附件、增強提示詞等等，但是我建議剛開始不用關注這些，直接點擊發送，然後等待 AI 的回應即可。
+
+![](https://pic.yupi.icu/1/image-20260104141314370.png)
+
+
+
+
+### AI 在做什麼？
+
+發送後，你會看到 Bolt.new 開始工作。
+
+AI 理解了你的需求，然後創建項目文件結構，再自動生成網頁程式碼，整個過程大約需要 2 分鐘。
+
+![](https://pic.yupi.icu/1/image-20260104141512389.png)
+
+程式碼生成完成後，右側會自動顯示預覽效果。你會看到一個輸入框、一個添加按鈕、任務列表區域。
+
+試著在輸入框裡輸入 "跟魚皮學習 Vibe Coding"，然後點擊添加按鈕，看看效果。
+
+![](https://pic.yupi.icu/1/image-20260104141637255.png)
+
+
+
+
+### 第 2 輪對話：優化細節
+
+看到初版效果後，你可能會想調整一些細節。比如：
+
+```
+很好！但我想做一些調整：
+
+1. 輸入框的佔位符文字改成 "今天要做什麼？"
+2. 添加按鈕改成 "➕ 添加任務"
+3. 標題改成 "我的待辦清單"，並加個可愛的圖標
+4. 背景色改成漸變色，從淺藍到淺紫
+5. 添加一個 "清空已完成" 的按鈕
+```
+
+還可以開啟可視化修改功能，選中你想要修改的元素，哪裡不爽點哪裡~
+
+![](https://pic.yupi.icu/1/image-20260104141819294.png)
+
+AI 會根據你的要求修改程式碼，很快你就能看到新效果。
+
+![](https://pic.yupi.icu/1/image-20260104142026165.png)
+
+
+
+
+### 第 3 輪對話：添加新功能
+
+如果你想添加更多功能，繼續和 AI 對話：
+
+```
+再加幾個功能：
+
+1. 任務可以設置優先級（高、中、低），用不同顏色標識
+2. 可以編輯已添加的任務
+3. 添加一個 "全部清空" 按鈕，並要求確認
+4. 任務列表為空時，顯示一個友好的提示
+```
+
+AI 會繼續幫你實現這些功能。
+
+![](https://pic.yupi.icu/1/image-20260104142238907.png)
+
+
+
+
+### 對話技巧
+
+在和 AI 對話時，記住這幾點：
+
+1. 需求要具體：不要說 “做得好看一點”，要說 “背景改成藍色漸變，按鈕加圓角”
+2. 一次不要改太多：每次提 1~5 個要求就夠了，改完看效果再繼續
+3. 遇到問題直接說：如果有 bug 或者效果不對，直接告訴 AI “XX 這裡有問題”
+4. 可以要求解釋：不懂的地方，可以問 “這段程式碼是做什麼的？”
+
+
+
+## 四、驗證效果
+
+現在，你的待辦事項應用已經做好了。讓我們測試一下各個功能：
+
+1）在輸入框輸入 "跟魚皮學習 Vibe Coding"，點擊添加按鈕，任務出現在列表中
+
+2）點擊任務前的複選框，任務文字顯示刪除線；點擊刪除按鈕，任務從列表中消失。
+
+最後點擊預覽窗口上方的設備圖標，看看在手機和不同螢幕上的效果。
+
+![](https://pic.yupi.icu/1/image-20260104142538383.png)
+
+如果發現某個功能無法正常使用，不要慌。把問題詳細描述給 AI，比如 "我點擊刪除按鈕後，任務沒有被刪除"，AI 會幫你修復 Bug，然後重新測試就好了。
+
+這就是 Vibe Coding 的魅力 —— 遇到問題，AI 幫你解決！
+
+
+
+## 五、部署上線
+
+做完了應用，現在讓我們把它發布到網際網路上，讓全世界的人都能訪問！
+
+### 快速部署（推薦）
+
+Bolt.new 提供了最簡單的部署方式，只需要點擊右上角的 "Publish" 按鈕，點擊發布：
+
+![](https://pic.yupi.icu/1/image-20260104142853639.png)
+
+然後稍等片刻，就能在聊天框中看到發布後的可訪問地址了：
+
+![](https://pic.yupi.icu/1/image-20260104142912318.png)
+
+部署成功後，你應該能在任何瀏覽器訪問你的應用，或者把地址分享給朋友讓他們也能訪問。
+
+恭喜，你的第一個網頁應用已經上線了，就這麼簡單！🎉
+
+💡 如果你覺得這個地址比較醜，Bolt.new 還支持自定義域名，但是僅高級版可用，我覺得沒必要。
+
+
+
+### 擴展知識 - 手動部署
+
+魚皮分享過多種快速部署上線項目的視頻教程：
+
+- [Vercel 項目部署教程](https://www.bilibili.com/video/BV1TV4y1j76t)
+- [雲端編輯器 + Vercel + 對象存儲 + 內網穿透 4 種方式部署](https://www.bilibili.com/video/BV1UZ4y197i1)
+- [Nginx + 寶塔 2 種方式部署個人博客](https://www.bilibili.com/video/BV1rU4y1J785)
+- [WordPress 搭建個人博客](https://www.bilibili.com/video/BV14q4y1R7XM)
+- [4 種主流前後端項目部署](https://www.codefather.cn/course/1790943469757837313/section/1791075571845345281?contentType=video&tabKey=videoList)
+
+此外，魚皮在 [編程導航](https://codefather.cn/) 帶大家做過 20 多套項目了，幾乎每種部署方式都給大家講解過，如果你想成為一名專業的程式員，建議學習一下。
+
+- [AI 零程式碼應用生成平台項目](https://www.codefather.cn/course/1948291549923344386)：1Panel 面板 + Nginx 前端 + Java 後端（jar 包）
+- [程式碼生成器共享平台項目](https://www.codefather.cn/course/1790980795074654209)：寶塔面板 + Nginx 前端 + Java 項目管理器（jar 包）後端部署
+- [AI 答題應用平台項目](https://www.code-nav.cn/course/1790274408835506178)： Vercel 前端 + Docker 後端 + 雲託管 Serverless 平台部署
+- [AI 超級智能體項目](https://www.codefather.cn/course/1915010091721236482)：Docker 前端 + Docker 後端 + 雲託管 Serverless 平台部署
+- [OJ 在線判題項目](https://www.codefather.cn/course/1790980707917017089)：Docker Compose 後端微服務部署
+
+基本上學會這幾種部署方式，能夠應對絕大多數部署需求了。
+
+
+
+## 六、理解你做的東西
+
+做完了項目，讓我們花幾分鐘理解一下你做的東西，這樣能幫你日後做出更好的項目。
+
+
+
+
+### 項目結構
+
+首先，你要知道網頁應用的基礎是 "前端三件套"：
+
+- HTML（結構）：定義了頁面有哪些元素，比如輸入框、按鈕、任務列表、統計信息。
+- CSS（樣式）：定義了頁面長什麼樣，包括顏色、字體、大小、佈局和間距、動畫效果。
+- JavaScript（功能）：定義了頁面怎麼工作，包括添加任務、標記完成、刪除任務、本地存儲的邏輯。
+
+不過，在這個項目中，AI 選擇了使用 **React** 這個現代化的前端開發框架來幫你實現功能。React 是目前最流行的前端框架之一，它讓開發更高效、程式碼更容易維護。
+
+所以你會在項目文件中看到 `.tsx` 後綴的文件，這些就是 React 組件文件。但本質上，它們最終還是會被轉換成瀏覽器能理解的 HTML、CSS 和 JavaScript。
+
+![](https://pic.yupi.icu/1/image-20260104162356144.png)
+
+沒事，現在不理解也完全沒關係。如果對前端開發感興趣的同學，可以看 [魚皮最新的保姆級前端學習路線](https://www.codefather.cn/course/1789189862986850306/section/1789190394078011393) 快速入門。
+
+
+
+
+### 核心功能解析（可跳過）
+
+讓我們看看幾個關鍵功能是怎麼實現的：
+
+1）添加任務：當你點擊 "添加任務" 按鈕時，程式會先獲取輸入框裡的文字，然後創建一個新的任務對象，把任務添加到列表裡，同時保存到本地存儲，最後清空輸入框並刷新頁面顯示。整個過程就像你在紙上寫下一個待辦事項，然後把它貼到牆上一樣自然。
+
+2）標記完成：當你點擊複選框時，程式會找到對應的任務，修改它的完成狀態，更新本地存儲，然後更新頁面顯示（給任務文字加上刪除線），同時更新統計數字。就像你用筆在紙上的任務上劃了一道線。
+
+3）本地存儲
+
+你可能會好奇，為什麼刷新頁面任務還在？
+
+這是因為數據保存在瀏覽器的本地存儲（localStorage）裡。每次你修改任務，程式都會把最新的數據保存到 localStorage；當你重新打開頁面時，程式會從 localStorage 讀取之前保存的數據。這樣即使關閉瀏覽器，數據也不會丟失。就像你把待辦清單寫在了一個不會丟的小本子上。
+
+![](https://pic.yupi.icu/1/theoryofworksoftware%E5%A4%A7.jpeg)
+
+
+
+### 向 AI 請教
+
+如果你想深入理解某個部分，可以直接問 AI：
+
+```
+請解釋一下本地存儲是怎麼工作的？
+```
+
+或者：
+
+```
+這段程式碼是做什麼的？
+[貼上程式碼]
+```
+
+AI 會用通俗易懂的語言給你解釋。
+
+
+
+## 七、嘗試修改和優化
+
+現在你已經有了一個實用的小軟體，讓我們嘗試一些修改和優化，加深理解。
+
+你可以試試：
+
+- 改變顏色主題（"把應用改成粉色主題，溫柔可愛的感覺"）
+- 修改文字（"把所有文字改成英文版本"）
+- 調整佈局（"把統計信息移到頁面底部，並居中顯示"）
+
+或者添加新功能，比如：
+
+- 任務搜索（"添加一個搜索框，可以搜索任務內容"）
+- 任務分類（"添加分類功能，可以給任務添加標籤"）
+- 導出功能（"添加一個按鈕，可以把所有任務導出為文本文件"）
+
+還可以優化用戶體驗，讓應用更好用：
+
+- 添加快捷鍵（"按回車鍵可以快速添加任務"）
+- 添加動畫（"添加任務時有一個淡入動畫，刪除任務時有一個滑出動畫"）
+- 空狀態優化（"當沒有任務時，顯示一個可愛的插圖和鼓勵文字"）。
+
+如果你覺得簡單，可以嘗試添加：
+
+- 截止日期功能
+- 任務提醒功能
+- 支持拖拽排序
+- 添加深色模式切換
+- 支持多個任務列表
+
+每次想添加新功能，就和 AI 說 "我想添加 [功能描述]，應該怎麼做？"，AI 會幫你實現。
+
+
+
+## 寫在最後
+
+恭喜，你已經完成了 Vibe Coding 的第一次實戰。
+
+你剛才做的事情，在幾年前需要幾個月的學習才能完成。但在今天，你只用了 10 分鐘！這就是 Vibe Coding 的力量。
+
+通過這個項目，你學會了如何清晰地向 AI 描述需求、通過多輪對話不斷優化項目、遇到問題如何跟 AI 協作解決，還學會了如何把項目發布到網際網路。雖然你沒有寫程式碼，但你已經理解了網頁應用的基本結構、用戶交互的實現方式、數據存儲的基本概念。
+
+更重要的是，你建立了 Vibe Coding 的思維方式：**關注 "要做什麼" 而不是 "怎麼做"**，先做出來再不斷優化，在做項目中學習而不是先學再做，把 AI 當作編程夥伴而不是工具。
+
+這只是開始，隨著你做的項目越來越多，你會發現你的需求表達能力越來越強、對技術的理解越來越深、能做的東西越來越複雜、創造力得到了真正的釋放。
+
+記住我在第一篇文章裡說的：**在 AI 時代，創造力比技術更重要，想法比實現更重要，迭代比完美更重要。**
+
+
+
+### 下一步建議
+
+接下來，建議你再做 2 ~ 3 個類似難度的項目來鞏固練習，比如個人名片網頁、倒計時應用、簡單計算器、天氣查詢工具。
+
+實踐是最好的老師，只有真正動手做，你才能真正理解 Vibe Coding 的魅力。
+
+當你熟練了 Bolt.new 平台和簡單項目的開發後，可以直接繼續學習本教程的後續內容：
+
+- 【進階選學】編程工具