[{"data":1,"prerenderedAt":267},["ShallowReactive",2],{"stack-frontend-stack":3},{"id":4,"title":5,"author":6,"body":7,"category":6,"date":229,"description":13,"extension":258,"image":259,"meta":260,"navigation":261,"path":262,"recommend":6,"seo":263,"stem":264,"tags":265,"updated":6,"__hash__":266},"stack\u002Fblog\u002Fstack\u002Ffrontend-stack.md","我的前端实践方案",null,{"type":8,"value":9,"toc":242},"minimark",[10,14,19,24,65,69,81,85,107,111,201,205,209,219,223],[11,12,13],"p",{},"这里记录我个人在开发中使用的前端开发方案。",[15,16,18],"h2",{"id":17},"_1-️-核心工具链","1. 🛠️ 核心工具链",[20,21,23],"h3",{"id":22},"_11-node-版本管理","1.1 Node 版本管理",[25,26,27,55],"ul",{},[28,29,30,40,41],"li",{},[31,32,33],"strong",{},[34,35,39],"a",{"href":36,"rel":37},"https:\u002F\u002Fvolta.sh\u002F",[38],"nofollow","Volta"," - 跨平台 Node 版本管理器\n",[25,42,43,52],{},[28,44,45,46,51],{},"通过「",[34,47,50],{"href":48,"rel":49},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FGlossary\u002FShim",[38],"垫片","」机制保证 GUI 应用也能找到 Node",[28,53,54],{},"完美兼容 VS Code 插件等场景",[28,56,57,64],{},[31,58,59],{},[34,60,63],{"href":61,"rel":62},"https:\u002F\u002Fgithub.com\u002FSchniz\u002Ffnm",[38],"fnm"," - 曾使用的工具，在 Windows 上对 GUI 应用支持不佳，已弃用",[20,66,68],{"id":67},"_12-包管理器","1.2 包管理器",[25,70,71],{},[28,72,73,80],{},[31,74,75],{},[34,76,79],{"href":77,"rel":78},"https:\u002F\u002Fpnpm.io\u002F",[38],"pnpm"," - 快速、节省磁盘空间的包管理器",[20,82,84],{"id":83},"_13-代码质量","1.3 代码质量",[25,86,87,97],{},[28,88,89,96],{},[31,90,91],{},[34,92,95],{"href":93,"rel":94},"https:\u002F\u002Foxc.rs",[38],"oxc"," - 高性能的 JavaScript\u002FTypeScript 代码质量工具集（Linter + Formatter）",[28,98,99,106],{},[31,100,101],{},[34,102,105],{"href":103,"rel":104},"https:\u002F\u002Fgithub.com\u002Ftoplenboren\u002Fsimple-git-hooks",[38],"simple-git-hooks"," - 轻量级 Git Hooks 管理工具，在提交前进行代码检查",[15,108,110],{"id":109},"_2-前端技术栈","2. 🚀 前端技术栈",[25,112,113,124,135,146,157,168,179,190],{},[28,114,115,116,123],{},"构建工具：",[31,117,118],{},[34,119,122],{"href":120,"rel":121},"https:\u002F\u002Fvitejs.dev\u002F",[38],"Vite"," - 下一代前端构建工具",[28,125,126,127,134],{},"JavaScript 框架：",[31,128,129],{},[34,130,133],{"href":131,"rel":132},"https:\u002F\u002Fvuejs.org\u002F",[38],"Vue 3"," - 渐进式 JavaScript 框架",[28,136,137,138,145],{},"全栈框架：",[31,139,140],{},[34,141,144],{"href":142,"rel":143},"https:\u002F\u002Fnuxt.com\u002F",[38],"Nuxt 4"," - Vue.js 全栈框架",[28,147,148,149,156],{},"状态管理：",[31,150,151],{},[34,152,155],{"href":153,"rel":154},"https:\u002F\u002Fpinia.vuejs.org\u002F",[38],"Pinia"," - Vue 3 官方推荐的状态管理库，提供类型安全的 Store",[28,158,159,160,167],{},"UI 框架：",[31,161,162],{},[34,163,166],{"href":164,"rel":165},"https:\u002F\u002Fnuxtui.org\u002F",[38],"Nuxt UI"," - 组件丰富，提供官方 AI MCP 支持",[28,169,170,171,178],{},"样式方案：",[31,172,173],{},[34,174,177],{"href":175,"rel":176},"https:\u002F\u002Ftailwindcss.com\u002F",[38],"Tailwind CSS"," - 原子化 CSS 框架",[28,180,181,182,189],{},"工具函数库：",[31,183,184],{},[34,185,188],{"href":186,"rel":187},"https:\u002F\u002Fvueuse.org\u002F",[38],"VueUse"," - 基于组合式 API 的实用工具集合，包含大量常用组合式函数",[28,191,192,193,200],{},"跨平台开发：",[31,194,195],{},[34,196,199],{"href":197,"rel":198},"https:\u002F\u002Ftauri.app\u002F",[38],"Tauri"," - 使用 Web 技术构建桌面应用",[15,202,204],{"id":203},"_3-开发环境","3. 💻 开发环境",[20,206,208],{"id":207},"_31-编辑器","3.1 编辑器",[11,210,211,218],{},[31,212,213],{},[34,214,217],{"href":215,"rel":216},"https:\u002F\u002Fcode.visualstudio.com\u002F",[38],"Visual Studio Code"," - 强大的现代代码编辑器",[15,220,222],{"id":221},"_4-更新日志","4. 📌 更新日志",[25,224,225,231],{},[28,226,227,230],{},[31,228,229],{},"2026-01-24"," - 初始版本，记录当前使用的前端技术栈",[28,232,233,236,237],{},[31,234,235],{},"2026-08-21"," - 移除了vscode拓展，详见",[34,238,241],{"href":239,"rel":240},"https:\u002F\u002Fwww.iice.fun\u002Fmore\u002Fvscode-extends",[38],"VS Code 拓展合集",{"title":243,"searchDepth":244,"depth":244,"links":245},"",4,[246,253,254,257],{"id":17,"depth":247,"text":18,"children":248},2,[249,251,252],{"id":22,"depth":250,"text":23},3,{"id":67,"depth":250,"text":68},{"id":83,"depth":250,"text":84},{"id":109,"depth":247,"text":110},{"id":203,"depth":247,"text":204,"children":255},[256],{"id":207,"depth":250,"text":208},{"id":221,"depth":247,"text":222},"md","https:\u002F\u002Fimg.iice.fun\u002Fblog\u002F2026\u002F01\u002F24\u002Fd403d2368ff08e1f95ef2b45b33c42fe.webp",{},true,"\u002Fblog\u002Fstack\u002Ffrontend-stack",{"title":5,"description":13},"blog\u002Fstack\u002Ffrontend-stack",[],"LnNQVjkeSQd0urbazbDJ6P8rYEtz4E3BEOCUz0ErR8Y",1792899441690]