[{"data":1,"prerenderedAt":226},["ShallowReactive",2],{"blog-build-studio-site-with-nuxt3":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tag":11,"body":12,"_type":166,"_id":221,"_source":222,"_file":223,"_stem":224,"_extension":225},"\u002Fblog\u002Fbuild-studio-site-with-nuxt3","blog",false,"","用 Nuxt 3 从零搭产品工作室官网","一个独立开发者如何把五个调性各异的产品收拢到一个官网：选型、信息架构、设计系统，以及用 @nuxt\u002Fcontent 管博客。","2026-07-18","开发日志",{"type":13,"children":14,"toc":213},"root",[15,23,30,35,80,93,98,103,112,117,123,128,139,144,150,163,174,179,190,203,208],{"type":16,"tag":17,"props":18,"children":19},"element","p",{},[20],{"type":21,"value":22},"text","手上有几个应用之后，第一反应是：得有个地方把它们讲清楚。这篇记录我是怎么用 Nuxt 3 把「宠健宝、消消乐、俯卧撑计数、EchoIsland、奶墩墩」收拢成一个工作室官网的。",{"type":16,"tag":24,"props":25,"children":27},"h2",{"id":26},"为什么选-nuxt-3",[28],{"type":21,"value":29},"为什么选 Nuxt 3",{"type":16,"tag":17,"props":31,"children":32},{},[33],{"type":21,"value":34},"我是 Vue 选手，复用技能是硬约束。对比几个方案后选了 Nuxt 3：",{"type":16,"tag":36,"props":37,"children":38},"ul",{},[39,51,61],{"type":16,"tag":40,"props":41,"children":42},"li",{},[43,49],{"type":16,"tag":44,"props":45,"children":46},"strong",{},[47],{"type":21,"value":48},"SSR 友好",{"type":21,"value":50},"：产品页要能被搜索引擎收录，纯 SPA 吃亏",{"type":16,"tag":40,"props":52,"children":53},{},[54,59],{"type":16,"tag":44,"props":55,"children":56},{},[57],{"type":21,"value":58},"未来可加动态能力",{"type":21,"value":60},"：合作表单、订阅，不用换框架",{"type":16,"tag":40,"props":62,"children":63},{},[64,69,71,78],{"type":16,"tag":44,"props":65,"children":66},{},[67],{"type":21,"value":68},"生态成熟",{"type":21,"value":70},"：",{"type":16,"tag":72,"props":73,"children":75},"code",{"className":74},[],[76],{"type":21,"value":77},"@nuxt\u002Fcontent",{"type":21,"value":79}," 直接管博客，零数据库",{"type":16,"tag":17,"props":81,"children":82},{},[83,85,91],{"type":21,"value":84},"部署上走静态生成（",{"type":16,"tag":72,"props":86,"children":88},{"className":87},[],[89],{"type":21,"value":90},"nuxt generate",{"type":21,"value":92},"），国内对象存储 + CDN 就能跑，省去常驻服务器。",{"type":16,"tag":24,"props":94,"children":96},{"id":95},"信息架构",[97],{"type":21,"value":95},{"type":16,"tag":17,"props":99,"children":100},{},[101],{"type":21,"value":102},"独立产品工作室站的标准骨架：",{"type":16,"tag":104,"props":105,"children":107},"pre",{"code":106},"首页 → 产品列表 → 产品详情 → 关于 → 联系\n                  ↘ 博客 \u002F 动态\n",[108],{"type":16,"tag":72,"props":109,"children":110},{"__ignoreMap":7},[111],{"type":21,"value":106},{"type":16,"tag":17,"props":113,"children":114},{},[115],{"type":21,"value":116},"首页只做三件事：一句话主张、产品矩阵预览、最新动态。",{"type":16,"tag":24,"props":118,"children":120},{"id":119},"设计系统有温度的极简",[121],{"type":21,"value":122},"设计系统：有温度的极简",{"type":16,"tag":17,"props":124,"children":125},{},[126],{"type":21,"value":127},"我审美要求高，又不想冷冰冰。定了一套变量：",{"type":16,"tag":104,"props":129,"children":134},{"code":130,"language":131,"meta":7,"className":132},":root {\n  --bg: #FBF9F6;        \u002F* 暖白底 *\u002F\n  --ink: #1F1F1F;       \u002F* 墨黑字 *\u002F\n  --accent: #F2C879;    \u002F* 奶油暖黄，呼应奶墩墩 *\u002F\n  --radius: 18px;       \u002F* 圆角卡片 *\u002F\n}\n","css",[133],"language-css",[135],{"type":16,"tag":72,"props":136,"children":137},{"__ignoreMap":7},[138],{"type":21,"value":130},{"type":16,"tag":17,"props":140,"children":141},{},[142],{"type":21,"value":143},"圆角 + 柔和阴影 + 大留白，能包住几个调性不同的产品而不打架。",{"type":16,"tag":24,"props":145,"children":147},{"id":146},"博客用-nuxtcontent-管",[148],{"type":21,"value":149},"博客用 @nuxt\u002Fcontent 管",{"type":16,"tag":17,"props":151,"children":152},{},[153,155,161],{"type":21,"value":154},"文章就是 ",{"type":16,"tag":72,"props":156,"children":158},{"className":157},[],[159],{"type":21,"value":160},"content\u002Fblog\u002F*.md",{"type":21,"value":162}," 文件，frontmatter 写元信息，正文用 Markdown：",{"type":16,"tag":104,"props":164,"children":169},{"code":165,"language":166,"meta":7,"className":167},"---\ntitle: 文章标题\ndate: 2026-07-18\ntag: 开发日志\ndescription: 一句话摘要\n---\n\n正文……\n","markdown",[168],"language-markdown",[170],{"type":16,"tag":72,"props":171,"children":172},{"__ignoreMap":7},[173],{"type":21,"value":165},{"type":16,"tag":17,"props":175,"children":176},{},[177],{"type":21,"value":178},"列表页取数据：",{"type":16,"tag":104,"props":180,"children":185},{"code":181,"language":182,"meta":7,"className":183},"const { data: posts } = await useAsyncData('blog', () =>\n  queryContent('\u002Fblog').sortBy('date', 'desc').find()\n)\n","ts",[184],"language-ts",[186],{"type":16,"tag":72,"props":187,"children":188},{"__ignoreMap":7},[189],{"type":21,"value":181},{"type":16,"tag":17,"props":191,"children":192},{},[193,195,201],{"type":21,"value":194},"详情页渲染正文用 ",{"type":16,"tag":72,"props":196,"children":198},{"className":197},[],[199],{"type":21,"value":200},"\u003CContentRenderer :value=\"post\" \u002F>",{"type":21,"value":202},"，构建期生成，SEO 天然好，发文章就是一次 git 提交。",{"type":16,"tag":24,"props":204,"children":206},{"id":205},"小结",[207],{"type":21,"value":205},{"type":16,"tag":17,"props":209,"children":210},{},[211],{"type":21,"value":212},"整套站第一个版本只花了一晚上的骨架时间。接下来会把真实内容与更新日志一点点填进去——官网不是一次写好的，是持续喂养的。",{"title":7,"searchDepth":214,"depth":214,"links":215},2,[216,217,218,219,220],{"id":26,"depth":214,"text":29},{"id":95,"depth":214,"text":95},{"id":119,"depth":214,"text":122},{"id":146,"depth":214,"text":149},{"id":205,"depth":214,"text":205},"content:blog:build-studio-site-with-nuxt3.md","content","blog\u002Fbuild-studio-site-with-nuxt3.md","blog\u002Fbuild-studio-site-with-nuxt3","md",1785074386112]