[{"data":1,"prerenderedAt":267},["ShallowReactive",2],{"post-\u002Fblog\u002Fgit":3,"post-surroundings":233},{"id":4,"title":5,"body":6,"date":219,"description":220,"desktopCover":26,"extension":221,"isPopular":222,"meta":223,"mobileCover":224,"navigation":225,"path":226,"seo":227,"slug":226,"stem":228,"tags":229,"__hash__":232},"blog\u002Fblog\u002Fgit.md","Git 與版本控制：前端協作的必修課",{"type":7,"value":8,"toc":212},"minimark",[9,20,192,195],[10,11,12,16],"content-space",{},[13,14,15],"h2",{"id":15},"前言",[17,18,19],"p",{},"在多人團隊中，Git 就像專案的「大腦」，掌握好它能讓你和隊友同心協力、避免互相覆蓋彼此的程式碼。今天我整理三大核心概念，帶你快速上手 Git 流程，從最基礎的 commit 到分支管理與協作，再到解決衝突，讓你的專案開發更加順暢。",[10,21,22,27,31,87,128,183],{},[23,24],"prose-img",{"alt":25,"src":26},"前言圖片","\u002Fdesktop\u002Fblog\u002Fgit.webp",[13,28,30],{"id":29},"三大關鍵打造穩定的-git-協作流程","三大關鍵：打造穩定的 Git 協作流程",[32,33,34,39,54,59],"content-block",{},[35,36,38],"h3",{"id":37},"一初始化與基本操作","一、初始化與基本操作",[17,40,41,45,48,49,53],{},[42,43,44],"strong",{},"為何重要",[46,47],"br",{},"\n所有操作都從 ",[50,51,52],"code",{},"git init"," 或 clone 開始，理解 commit、add、push 的順序，才能確保歷史紀錄乾淨且易於追溯。",[17,55,56],{},[42,57,58],{},"建議做法",[60,61,62,73,80],"ol",{},[63,64,65,66,68,69,72],"li",{},"新專案先執行 ",[50,67,52],{},"，並加入 ",[50,70,71],{},".gitignore"," 忽略 node_modules、build 資料夾。",[63,74,75,76,79],{},"逐步 add & commit：每完成一項小功能，就用簡潔訊息（如 ",[50,77,78],{},"feat: 新增登入表單","）做一次 commit。",[63,81,82,83,86],{},"push 到遠端：",[50,84,85],{},"git push origin main"," 前先 pull 最新，保持本地與遠端同步。",[32,88,89,93,100,104],{},[35,90,92],{"id":91},"二分支策略與-pr-流程","二、分支策略與 PR 流程",[17,94,95,97,99],{},[42,96,44],{},[46,98],{},"\n清晰的分支策略能避免多人同時改同一段程式、降低衝突，也能讓測試和部署流程更可靠。",[17,101,102],{},[42,103,58],{},[105,106,107,118,121],"ul",{},[63,108,109,110,113,114,117],{},"使用 Feature Branch：每個新功能或 bugfix 在 ",[50,111,112],{},"feature\u002Fxxx"," 或 ",[50,115,116],{},"bugfix\u002Fxxx"," 分支開發。",[63,119,120],{},"Pull Request（PR）流程：完成後發 PR，請求同事 code review，確保品質並讓大家共享知識。",[63,122,123,124,127],{},"Merge 與 Rebase：習慣把分支 rebase 到最新 ",[50,125,126],{},"main","，然後再合併，保有乾淨的歷史。",[32,129,130,134,141,145],{},[35,131,133],{"id":132},"三衝突處理與回滾技巧","三、衝突處理與回滾技巧",[17,135,136,138,140],{},[42,137,44],{},[46,139],{},"\n衝突無可避免，知道如何妥善解決以及需要時快速回滾，能降低開發風險。",[17,142,143],{},[42,144,58],{},[60,146,147,162,173],{},[63,148,149,150,153,154,157,158,161],{},"衝突發生時，用 ",[50,151,152],{},"git status"," 找到衝突檔，手動或工具（VSCode Merge）解決後再 ",[50,155,156],{},"git add","、",[50,159,160],{},"git commit","。",[63,163,164,165,168,169,172],{},"如有必要，利用 ",[50,166,167],{},"git revert \u003Ccommit>"," 生成「反向提交」來回滾錯誤更改；或用 ",[50,170,171],{},"git reset --hard \u003Chash>"," 回到某個安全點（慎用）。",[63,174,175,176,178,179,182],{},"定期在 ",[50,177,126],{}," 分支打標籤（",[50,180,181],{},"git tag v1.0.0","），快速定位穩定版本。",[184,185,186],"blockquote",{},[17,187,188,189,191],{},"小結：",[46,190],{},"\n從「初始化與基礎 commit → 分支策略與 PR → 衝突處理及回滾」，掌握三大 Git 核心流程，就能讓前端專案協作更有序、更安全，也更容易維護。",[13,193,194],{"id":194},"延伸閱讀",[105,196,197,202,207],{},[63,198,199],{},[42,200,201],{},"Git Flow 實戰：打造團隊專屬分支規範",[63,203,204],{},[42,205,206],{},"持續整合 CI\u002FCD：與 Git 的無縫接軌",[63,208,209],{},[42,210,211],{},"GitHub Actions 入門：自動化前端測試與部署",{"title":213,"searchDepth":214,"depth":214,"links":215},"",2,[216,217,218],{"id":15,"depth":214,"text":15},{"id":29,"depth":214,"text":30},{"id":194,"depth":214,"text":194},"2024-05-04","當你從一人開發晉升到多人合作，版本控制的好壞往往決定了專案的順暢度。Git 不僅能記錄程式碼變動，更能確保每位成員都在正確的分支上完成任務。透過這篇文章，你將了解常見的 Git 流程，並學會在前端專案中輕鬆管理與協作。","md",false,{},"\u002Fmobile\u002Fblog\u002Fgit.webp",true,"\u002Fblog\u002Fgit",{"title":5,"description":220},"blog\u002Fgit",[230,231],"Git","協作流程","EblfyI-ChJI2TmYz4ZZKlxC0yGZTGJMXrRhkFMNtkOM",[234,237,240,243,246,249,252,255,256,259,262,264],{"slug":235,"path":235,"date":236},"\u002Fblog\u002Fstart-from-scratch","2024-10-21",{"slug":238,"path":238,"date":239},"\u002Fblog\u002Freact-intro","2024-10-11",{"slug":241,"path":241,"date":242},"\u002Fblog\u002Fgood-resume","2024-09-07",{"slug":244,"path":244,"date":245},"\u002Fblog\u002Fcss-magic","2024-09-03",{"slug":247,"path":247,"date":248},"\u002Fblog\u002Fmental-journey","2024-07-09",{"slug":250,"path":250,"date":251},"\u002Fblog\u002Fjob-interview","2024-07-08",{"slug":253,"path":253,"date":254},"\u002Fblog\u002Fvue3-composition-api","2024-06-29",{"slug":226,"path":226,"date":219},{"slug":257,"path":257,"date":258},"\u002Fblog\u002Fseo","2024-05-01",{"slug":260,"path":260,"date":261},"\u002Fblog\u002Fautomation","2024-02-17",{"slug":263,"path":263,"date":261},"\u002Fblog\u002Ftypescript",{"slug":265,"path":265,"date":266},"\u002Fblog\u002Funit-test","2024-02-07",1793785242364]