[{"data":1,"prerenderedAt":510},["ShallowReactive",2],{"latest-posts":3},[4,227],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"date":11,"tag":12,"body":13,"_type":167,"_id":222,"_source":223,"_file":224,"_stem":225,"_extension":226},"\u002Fblog\u002Fbuild-studio-site-with-nuxt3","blog",false,"","用 Nuxt 3 从零搭产品工作室官网","一个独立开发者如何把五个调性各异的产品收拢到一个官网：选型、信息架构、设计系统，以及用 @nuxt\u002Fcontent 管博客。","2026-07-18","开发日志",{"type":14,"children":15,"toc":214},"root",[16,24,31,36,81,94,99,104,113,118,124,129,140,145,151,164,175,180,191,204,209],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":22,"value":23},"text","手上有几个应用之后，第一反应是：得有个地方把它们讲清楚。这篇记录我是怎么用 Nuxt 3 把「宠健宝、消消乐、俯卧撑计数、EchoIsland、奶墩墩」收拢成一个工作室官网的。",{"type":17,"tag":25,"props":26,"children":28},"h2",{"id":27},"为什么选-nuxt-3",[29],{"type":22,"value":30},"为什么选 Nuxt 3",{"type":17,"tag":18,"props":32,"children":33},{},[34],{"type":22,"value":35},"我是 Vue 选手，复用技能是硬约束。对比几个方案后选了 Nuxt 3：",{"type":17,"tag":37,"props":38,"children":39},"ul",{},[40,52,62],{"type":17,"tag":41,"props":42,"children":43},"li",{},[44,50],{"type":17,"tag":45,"props":46,"children":47},"strong",{},[48],{"type":22,"value":49},"SSR 友好",{"type":22,"value":51},"：产品页要能被搜索引擎收录，纯 SPA 吃亏",{"type":17,"tag":41,"props":53,"children":54},{},[55,60],{"type":17,"tag":45,"props":56,"children":57},{},[58],{"type":22,"value":59},"未来可加动态能力",{"type":22,"value":61},"：合作表单、订阅，不用换框架",{"type":17,"tag":41,"props":63,"children":64},{},[65,70,72,79],{"type":17,"tag":45,"props":66,"children":67},{},[68],{"type":22,"value":69},"生态成熟",{"type":22,"value":71},"：",{"type":17,"tag":73,"props":74,"children":76},"code",{"className":75},[],[77],{"type":22,"value":78},"@nuxt\u002Fcontent",{"type":22,"value":80}," 直接管博客，零数据库",{"type":17,"tag":18,"props":82,"children":83},{},[84,86,92],{"type":22,"value":85},"部署上走静态生成（",{"type":17,"tag":73,"props":87,"children":89},{"className":88},[],[90],{"type":22,"value":91},"nuxt generate",{"type":22,"value":93},"），国内对象存储 + CDN 就能跑，省去常驻服务器。",{"type":17,"tag":25,"props":95,"children":97},{"id":96},"信息架构",[98],{"type":22,"value":96},{"type":17,"tag":18,"props":100,"children":101},{},[102],{"type":22,"value":103},"独立产品工作室站的标准骨架：",{"type":17,"tag":105,"props":106,"children":108},"pre",{"code":107},"首页 → 产品列表 → 产品详情 → 关于 → 联系\n                  ↘ 博客 \u002F 动态\n",[109],{"type":17,"tag":73,"props":110,"children":111},{"__ignoreMap":8},[112],{"type":22,"value":107},{"type":17,"tag":18,"props":114,"children":115},{},[116],{"type":22,"value":117},"首页只做三件事：一句话主张、产品矩阵预览、最新动态。",{"type":17,"tag":25,"props":119,"children":121},{"id":120},"设计系统有温度的极简",[122],{"type":22,"value":123},"设计系统：有温度的极简",{"type":17,"tag":18,"props":125,"children":126},{},[127],{"type":22,"value":128},"我审美要求高，又不想冷冰冰。定了一套变量：",{"type":17,"tag":105,"props":130,"children":135},{"code":131,"language":132,"meta":8,"className":133},":root {\n  --bg: #FBF9F6;        \u002F* 暖白底 *\u002F\n  --ink: #1F1F1F;       \u002F* 墨黑字 *\u002F\n  --accent: #F2C879;    \u002F* 奶油暖黄，呼应奶墩墩 *\u002F\n  --radius: 18px;       \u002F* 圆角卡片 *\u002F\n}\n","css",[134],"language-css",[136],{"type":17,"tag":73,"props":137,"children":138},{"__ignoreMap":8},[139],{"type":22,"value":131},{"type":17,"tag":18,"props":141,"children":142},{},[143],{"type":22,"value":144},"圆角 + 柔和阴影 + 大留白，能包住几个调性不同的产品而不打架。",{"type":17,"tag":25,"props":146,"children":148},{"id":147},"博客用-nuxtcontent-管",[149],{"type":22,"value":150},"博客用 @nuxt\u002Fcontent 管",{"type":17,"tag":18,"props":152,"children":153},{},[154,156,162],{"type":22,"value":155},"文章就是 ",{"type":17,"tag":73,"props":157,"children":159},{"className":158},[],[160],{"type":22,"value":161},"content\u002Fblog\u002F*.md",{"type":22,"value":163}," 文件，frontmatter 写元信息，正文用 Markdown：",{"type":17,"tag":105,"props":165,"children":170},{"code":166,"language":167,"meta":8,"className":168},"---\ntitle: 文章标题\ndate: 2026-07-18\ntag: 开发日志\ndescription: 一句话摘要\n---\n\n正文……\n","markdown",[169],"language-markdown",[171],{"type":17,"tag":73,"props":172,"children":173},{"__ignoreMap":8},[174],{"type":22,"value":166},{"type":17,"tag":18,"props":176,"children":177},{},[178],{"type":22,"value":179},"列表页取数据：",{"type":17,"tag":105,"props":181,"children":186},{"code":182,"language":183,"meta":8,"className":184},"const { data: posts } = await useAsyncData('blog', () =>\n  queryContent('\u002Fblog').sortBy('date', 'desc').find()\n)\n","ts",[185],"language-ts",[187],{"type":17,"tag":73,"props":188,"children":189},{"__ignoreMap":8},[190],{"type":22,"value":182},{"type":17,"tag":18,"props":192,"children":193},{},[194,196,202],{"type":22,"value":195},"详情页渲染正文用 ",{"type":17,"tag":73,"props":197,"children":199},{"className":198},[],[200],{"type":22,"value":201},"\u003CContentRenderer :value=\"post\" \u002F>",{"type":22,"value":203},"，构建期生成，SEO 天然好，发文章就是一次 git 提交。",{"type":17,"tag":25,"props":205,"children":207},{"id":206},"小结",[208],{"type":22,"value":206},{"type":17,"tag":18,"props":210,"children":211},{},[212],{"type":22,"value":213},"整套站第一个版本只花了一晚上的骨架时间。接下来会把真实内容与更新日志一点点填进去——官网不是一次写好的，是持续喂养的。",{"title":8,"searchDepth":215,"depth":215,"links":216},2,[217,218,219,220,221],{"id":27,"depth":215,"text":30},{"id":96,"depth":215,"text":96},{"id":120,"depth":215,"text":123},{"id":147,"depth":215,"text":150},{"id":206,"depth":215,"text":206},"content:blog:build-studio-site-with-nuxt3.md","content","blog\u002Fbuild-studio-site-with-nuxt3.md","blog\u002Fbuild-studio-site-with-nuxt3","md",{"_path":228,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":229,"description":230,"date":231,"tag":232,"body":233,"_type":167,"_id":507,"_source":223,"_file":508,"_stem":509,"_extension":226},"\u002Fblog\u002Fai-coding-2026-h1","AI Coding 行业观察（2026 上半年）","上半年 AI 编程工具的关键变化：从补全到代理，从单文件到多仓协作，以及对独立开发者工作流的真实影响。","2026-07-12","AI Coding",{"type":14,"children":234,"toc":500},[235,240,246,258,299,311,317,322,340,345,351,363,382,387,474,486,490,495],{"type":17,"tag":18,"props":236,"children":237},{},[238],{"type":22,"value":239},"2026 上半年，AI 编程工具的演进比过去三年加起来都猛。作为一个习惯「0 元成本、自己动手」的独立开发者，我把上半年最关键的几个变化梳理出来，也顺便记录它们如何真实地改变了我的工作流。",{"type":17,"tag":25,"props":241,"children":243},{"id":242},"一从补全到代理agent",[244],{"type":22,"value":245},"一、从「补全」到「代理（Agent）」",{"type":17,"tag":18,"props":247,"children":248},{},[249,251,256],{"type":22,"value":250},"最直观的变化是：工具不再只是帮你补全下一行，而是能接受一个",{"type":17,"tag":45,"props":252,"children":253},{},[254],{"type":22,"value":255},"目标",{"type":22,"value":257},"，自己拆解、读仓库、改多个文件、跑命令、再回来看结果。",{"type":17,"tag":259,"props":260,"children":261},"blockquote",{},[262],{"type":17,"tag":18,"props":263,"children":264},{},[265,267,273,275,281,283,289,291,297],{"type":22,"value":266},"以前：我写 ",{"type":17,"tag":73,"props":268,"children":270},{"className":269},[],[271],{"type":22,"value":272},"function",{"type":22,"value":274},"，AI 补 ",{"type":17,"tag":73,"props":276,"children":278},{"className":277},[],[279],{"type":22,"value":280},"}",{"type":22,"value":282},"。\n现在：我说「给产品卡片加筛选」，AI 自己改 ",{"type":17,"tag":73,"props":284,"children":286},{"className":285},[],[287],{"type":22,"value":288},"ProductCard.vue",{"type":22,"value":290},"、加 ",{"type":17,"tag":73,"props":292,"children":294},{"className":293},[],[295],{"type":22,"value":296},"useProducts",{"type":22,"value":298}," 组合式函数、补样式。",{"type":17,"tag":18,"props":300,"children":301},{},[302,304,309],{"type":22,"value":303},"这对独立开发者的意义是——",{"type":17,"tag":45,"props":305,"children":306},{},[307],{"type":22,"value":308},"一个人能撑起的复杂度上限被抬高了",{"type":22,"value":310},"。同样的精力，现在能维护更多产品。",{"type":17,"tag":25,"props":312,"children":314},{"id":313},"二从单文件到多仓-多工具协作",[315],{"type":22,"value":316},"二、从单文件到多仓 \u002F 多工具协作",{"type":17,"tag":18,"props":318,"children":319},{},[320],{"type":22,"value":321},"工具开始理解整个工程，而不只是当前文件：",{"type":17,"tag":37,"props":323,"children":324},{},[325,330,335],{"type":17,"tag":41,"props":326,"children":327},{},[328],{"type":22,"value":329},"能跨文件定位一处改动的影响面",{"type":17,"tag":41,"props":331,"children":332},{},[333],{"type":22,"value":334},"能调用终端、跑测试、读报错",{"type":17,"tag":41,"props":336,"children":337},{},[338],{"type":22,"value":339},"能把「需求 → 提交」做成一条流水线",{"type":17,"tag":18,"props":341,"children":342},{},[343],{"type":22,"value":344},"这对我这种同时跑 5 个项目的状态尤其友好：切换上下文的成本被大幅摊薄。",{"type":17,"tag":25,"props":346,"children":348},{"id":347},"三上下文工程成为新核心技能",[349],{"type":22,"value":350},"三、上下文工程成为新核心技能",{"type":17,"tag":18,"props":352,"children":353},{},[354,356,361],{"type":22,"value":355},"当工具足够强，",{"type":17,"tag":45,"props":357,"children":358},{},[359],{"type":22,"value":360},"会提问、会喂上下文",{"type":22,"value":362},"反而成了瓶颈。我的几条习惯：",{"type":17,"tag":364,"props":365,"children":366},"ol",{},[367,372,377],{"type":17,"tag":41,"props":368,"children":369},{},[370],{"type":22,"value":371},"先写一小段设计文档再动手（本项目就是这么起的头）",{"type":17,"tag":41,"props":373,"children":374},{},[375],{"type":22,"value":376},"给 AI 明确的「不要做什么」，比罗列「要做什么」更有效",{"type":17,"tag":41,"props":378,"children":379},{},[380],{"type":22,"value":381},"把偏好沉淀成可复用资产（比如本工作室官网的设计系统）",{"type":17,"tag":25,"props":383,"children":385},{"id":384},"对独立开发者的真实影响",[386],{"type":22,"value":384},{"type":17,"tag":388,"props":389,"children":390},"table",{},[391,415],{"type":17,"tag":392,"props":393,"children":394},"thead",{},[395],{"type":17,"tag":396,"props":397,"children":398},"tr",{},[399,405,410],{"type":17,"tag":400,"props":401,"children":402},"th",{},[403],{"type":22,"value":404},"维度",{"type":17,"tag":400,"props":406,"children":407},{},[408],{"type":22,"value":409},"上半年之前",{"type":17,"tag":400,"props":411,"children":412},{},[413],{"type":22,"value":414},"现在",{"type":17,"tag":416,"props":417,"children":418},"tbody",{},[419,438,456],{"type":17,"tag":396,"props":420,"children":421},{},[422,428,433],{"type":17,"tag":423,"props":424,"children":425},"td",{},[426],{"type":22,"value":427},"同时维护的产品数",{"type":17,"tag":423,"props":429,"children":430},{},[431],{"type":22,"value":432},"1–2 个",{"type":17,"tag":423,"props":434,"children":435},{},[436],{"type":22,"value":437},"4–5 个",{"type":17,"tag":396,"props":439,"children":440},{},[441,446,451],{"type":17,"tag":423,"props":442,"children":443},{},[444],{"type":22,"value":445},"上线一个 MVP",{"type":17,"tag":423,"props":447,"children":448},{},[449],{"type":22,"value":450},"数周",{"type":17,"tag":423,"props":452,"children":453},{},[454],{"type":22,"value":455},"数天",{"type":17,"tag":396,"props":457,"children":458},{},[459,464,469],{"type":17,"tag":423,"props":460,"children":461},{},[462],{"type":22,"value":463},"学习新框架的门槛",{"type":17,"tag":423,"props":465,"children":466},{},[467],{"type":22,"value":468},"高",{"type":17,"tag":423,"props":470,"children":471},{},[472],{"type":22,"value":473},"显著降低",{"type":17,"tag":18,"props":475,"children":476},{},[477,479,484],{"type":22,"value":478},"变化不是「写代码更快」，而是",{"type":17,"tag":45,"props":480,"children":481},{},[482],{"type":22,"value":483},"敢同时试更多东西了",{"type":22,"value":485},"。",{"type":17,"tag":25,"props":487,"children":488},{"id":206},[489],{"type":22,"value":206},{"type":17,"tag":18,"props":491,"children":492},{},[493],{"type":22,"value":494},"工具越强，越考验「想清楚要什么」。这半年我最大的收获不是效率，而是把「低成本试错」变成日常——和奶墩墩 IP 用「即梦 + DeepSeek + 稿定设计」0 元孵化的思路，在技术侧也跑通了。",{"type":17,"tag":18,"props":496,"children":497},{},[498],{"type":22,"value":499},"下一篇我会写：如何用 Nuxt 3 把这几个产品收拢成一个官网。",{"title":8,"searchDepth":215,"depth":215,"links":501},[502,503,504,505,506],{"id":242,"depth":215,"text":245},{"id":313,"depth":215,"text":316},{"id":347,"depth":215,"text":350},{"id":384,"depth":215,"text":384},{"id":206,"depth":215,"text":206},"content:blog:ai-coding-2026-h1.md","blog\u002Fai-coding-2026-h1.md","blog\u002Fai-coding-2026-h1",1785074386100]