為了督促一下我自己hhhhhh，也作為來(lái)時(shí)開(kāi)始的路的一個(gè)小錨點(diǎn)叭，我是一個(gè)一點(diǎn)代碼都不懂的偏藝術(shù)的半理科生，寫(xiě)下這些日記筆記，以期來(lái)日。
學(xué)習(xí)目標(biāo)-預(yù)期成果產(chǎn)出
本次學(xué)習(xí)的終點(diǎn)目標(biāo)任務(wù)，兩個(gè)！————? ?個(gè)人主頁(yè) +?數(shù)字分身
章節(jié)結(jié)構(gòu)
?。?！Task 01
截至2026.3.18凌晨3：00前，需要確定作品方向，完成選題、用戶場(chǎng)景梳理，并搭好開(kāi)發(fā)環(huán)境。
學(xué)習(xí)了前端開(kāi)發(fā)環(huán)境搭建的第一章內(nèi)容，從零基礎(chǔ)的視角逐步了解了現(xiàn)代前端開(kāi)發(fā)的基礎(chǔ)環(huán)境、工具鏈和核心概念，打破了我對(duì) “AI 寫(xiě)代碼就能直接用” 的認(rèn)知誤區(qū)，也讓我明白環(huán)境搭建并非開(kāi)發(fā)的 “門(mén)檻”，而是與 AI 協(xié)作、開(kāi)展現(xiàn)代化前端開(kāi)發(fā)的必備基礎(chǔ)，每一個(gè)工具和規(guī)范的背后，都是為了讓開(kāi)發(fā)更高效、更規(guī)范。以下是本次學(xué)習(xí)的核心感想與
知識(shí)點(diǎn)梳理
一、核心認(rèn)知突破：AI 寫(xiě)代碼≠直接能用，基礎(chǔ)能力是協(xié)作前提
作為零基礎(chǔ)入門(mén)者，最開(kāi)始會(huì)和教程中一樣，以為有 AI 生成代碼就可以直接實(shí)現(xiàn)功能，直到遇到.ts/.tsx代碼無(wú)法直接運(yùn)行的問(wèn)題，才理解開(kāi)發(fā)的核心不僅是 “有代碼”，更是 “讓代碼跑起來(lái)”。AI 就像導(dǎo)航，能提供代碼的 “路線”，但環(huán)境搭建、工具使用的基礎(chǔ)能力，就是開(kāi)車的 “基本功”—— 沒(méi)有這個(gè)基本功，再優(yōu)質(zhì)的代碼也只是無(wú)法執(zhí)行的文本。
同時(shí)也認(rèn)識(shí)到，單文件 HTML 的簡(jiǎn)單開(kāi)發(fā)和現(xiàn)代模塊化開(kāi)發(fā)是完全不同的維度：前者適合快速演示，將 HTML、CSS、JS 糅合在一起，瀏覽器可直接解析；而后者為了實(shí)現(xiàn)復(fù)雜功能，使用 TypeScript、React 等技術(shù)，需要專門(mén)的 “翻譯官”（編譯器）和運(yùn)行環(huán)境，這也是 Node.js、包管理器等工具存在的核心意義。
二、工具鏈學(xué)習(xí)：理解每個(gè)工具的 “存在價(jià)值”，而非機(jī)械記憶
本次學(xué)習(xí)接觸了 nvm、Node.js、pnpm、終端等核心工具，不再是單純記命令，而是理解了每個(gè)工具解決的實(shí)際問(wèn)題，讓工具的學(xué)習(xí)變得有邏輯：
Node.js+TypeScript：TypeScript 讓代碼更嚴(yán)謹(jǐn)、適合大型項(xiàng)目，但瀏覽器無(wú)法直接解析，Node.js 作為運(yùn)行環(huán)境，支撐編譯器將 TS 翻譯成瀏覽器能懂的 JS，是現(xiàn)代前端開(kāi)發(fā)的 “基礎(chǔ)引擎”。
nvm 版本管理：解決了 Node.js 多版本沖突的痛點(diǎn)，不同項(xiàng)目對(duì) Node 版本要求不同，nvm 可實(shí)現(xiàn)版本的快速安裝、切換，無(wú)需反復(fù)卸載重裝，讓開(kāi)發(fā)環(huán)境更靈活，這也是為什么不推薦直接從官網(wǎng)安裝 Node.js 的核心原因。
pnpm 包管理器：相比 Node.js 自帶的 npm，pnpm 通過(guò)硬鏈接和符號(hào)鏈接技術(shù)，節(jié)省 50%-70% 磁盤(pán)空間，且安裝速度更快，完美適配 AI 開(kāi)發(fā)中頻繁創(chuàng)建新項(xiàng)目的場(chǎng)景，也理解了包管理器的核心作用 —— 高效管理開(kāi)源代碼包，避免 “重復(fù)造輪子”。
終端：不再是神秘的 “黑客工具”，而是與操作系統(tǒng)精準(zhǔn)對(duì)話的方式，比圖形界面更高效。同時(shí)也掌握了command not found的排查邏輯：檢查拼寫(xiě)→驗(yàn)證安裝→確認(rèn)目錄，這種 “排查思維” 比記憶具體命令更重要。
三、開(kāi)源生態(tài)：站在巨人的肩膀上，是現(xiàn)代開(kāi)發(fā)的核心邏輯
教程中 “蓋房子不用自己燒磚” 的比喻讓我印象深刻，現(xiàn)代軟件開(kāi)發(fā)的核心并非從零編寫(xiě)代碼，而是合理利用開(kāi)源生態(tài)。npm 擁有超 200 萬(wàn)個(gè)開(kāi)源代碼包，React 搞定界面、Axios 處理網(wǎng)絡(luò)請(qǐng)求、Zod 做數(shù)據(jù)驗(yàn)證、Day.js 處理時(shí)間…… 這些現(xiàn)成的包能讓開(kāi)發(fā)者專注于業(yè)務(wù)邏輯，大幅提升開(kāi)發(fā)效率。
這也讓我明白，學(xué)習(xí)前端開(kāi)發(fā)，不僅要學(xué)基礎(chǔ)工具，還要了解開(kāi)源生態(tài)的核心包及其用途，學(xué)會(huì) “借力”—— 識(shí)別項(xiàng)目需求，選擇合適的開(kāi)源包，是開(kāi)發(fā)效率的關(guān)鍵。
四、規(guī)范與細(xì)節(jié)：小細(xì)節(jié)決定開(kāi)發(fā)是否 “順暢”，避坑比解決問(wèn)題更重要
教程中反復(fù)強(qiáng)調(diào)的命名規(guī)范和網(wǎng)絡(luò)基礎(chǔ)細(xì)節(jié)，讓我體會(huì)到前端開(kāi)發(fā)中 “細(xì)節(jié)決定成敗”：
文件夾 / 文件命名：必須避免中文和空格，因?yàn)榈讓娱_(kāi)發(fā)工具對(duì)非英文字符支持不佳，中文路徑往往是各種離奇報(bào)錯(cuò)的根源，規(guī)范的命名（連字符my-project、下劃線my_project）是開(kāi)發(fā)的 “第一道避坑線”。
Localhost與端口：理解了localhost(127.0.0.1)是 “自己的電腦”，端口是應(yīng)用運(yùn)行的 “房間號(hào)”，一個(gè)端口只能運(yùn)行一個(gè)程序，遇到EADDRINUSE報(bào)錯(cuò)只需更換端口。這個(gè)基礎(chǔ)的網(wǎng)絡(luò)概念，是啟動(dòng)項(xiàng)目、排查運(yùn)行問(wèn)題的關(guān)鍵。
同時(shí)，典型項(xiàng)目的文件結(jié)構(gòu)也讓我對(duì)前端項(xiàng)目的規(guī)范性有了直觀認(rèn)知，package.json（項(xiàng)目配置）、tsconfig.json（TS 配置）、node_modules（依賴包）等文件 / 目錄各有其用，規(guī)范的項(xiàng)目結(jié)構(gòu)能讓開(kāi)發(fā)和協(xié)作更清晰。
五、工具與模型選擇：性價(jià)比與適配性，比 “一味選優(yōu)” 更重要
在模型與工具的選擇上，教程打破了 “選能力最強(qiáng)的模型就好” 的誤區(qū)，讓我建立了開(kāi)發(fā)的成本意識(shí)和適配意識(shí)：Claude 等模型能力強(qiáng)，但國(guó)產(chǎn)模型如 GLM 性價(jià)比高、訪問(wèn)快，每月可用 tokens 量大，適合大規(guī)模開(kāi)發(fā)；而工具的選擇核心是 “適配項(xiàng)目需求”，而非盲目追求最新、最全，工具決定代碼實(shí)現(xiàn)的效率，模型決定代碼能力的上限，二者匹配才能實(shí)現(xiàn)最優(yōu)開(kāi)發(fā)。
六、學(xué)習(xí)總結(jié)與后續(xù)規(guī)劃
本次學(xué)習(xí)讓我從零基礎(chǔ)搭建了現(xiàn)代前端開(kāi)發(fā)的核心認(rèn)知框架，從代碼形態(tài)的演變，到工具鏈的使用，再到開(kāi)源生態(tài)、規(guī)范細(xì)節(jié)，每一個(gè)知識(shí)點(diǎn)都環(huán)環(huán)相扣，構(gòu)成了前端開(kāi)發(fā)的 “基礎(chǔ)地基”。后續(xù)的學(xué)習(xí)中，我會(huì)從以下幾點(diǎn)入手，鞏固本次學(xué)習(xí)成果：
動(dòng)手實(shí)踐：按照教程步驟，用 nvm 安裝 Node.js、配置 pnpm，新建英文命名的文件夾，嘗試用 AI 創(chuàng)建 Next.js 項(xiàng)目，執(zhí)行pnpm install和pnpm dev，體驗(yàn)從環(huán)境搭建到項(xiàng)目啟動(dòng)的完整流程。
熟悉終端命令：練習(xí)ls、cd、pwd等基礎(chǔ)終端命令，掌握 nvm、pnpm 的核心操作，建立 “命令行思維”。
了解開(kāi)源包：按分類探索 npm 生態(tài)的常用開(kāi)源包，理解每個(gè)包的核心用途，為后續(xù)項(xiàng)目開(kāi)發(fā)做儲(chǔ)備。
重視規(guī)范：從一開(kāi)始就養(yǎng)成 “英文命名、規(guī)范目錄” 的習(xí)慣，讓開(kāi)發(fā)從源頭避免不必要的報(bào)錯(cuò)。
