用 Nuxt 3 从零搭产品工作室官网

手上有几个应用之后，第一反应是：得有个地方把它们讲清楚。这篇记录我是怎么用 Nuxt 3 把「宠健宝、消消乐、俯卧撑计数、EchoIsland、奶墩墩」收拢成一个工作室官网的。

为什么选 Nuxt 3

我是 Vue 选手，复用技能是硬约束。对比几个方案后选了 Nuxt 3：

• SSR 友好：产品页要能被搜索引擎收录，纯 SPA 吃亏
• 未来可加动态能力：合作表单、订阅，不用换框架
• 生态成熟：@nuxt/content 直接管博客，零数据库

部署上走静态生成（nuxt generate），国内对象存储 + CDN 就能跑，省去常驻服务器。

信息架构

独立产品工作室站的标准骨架：

首页 → 产品列表 → 产品详情 → 关于 → 联系
                  ↘ 博客 / 动态

首页只做三件事：一句话主张、产品矩阵预览、最新动态。

设计系统：有温度的极简

我审美要求高，又不想冷冰冰。定了一套变量：

:root {
  --bg: #FBF9F6;        /* 暖白底 */
  --ink: #1F1F1F;       /* 墨黑字 */
  --accent: #F2C879;    /* 奶油暖黄，呼应奶墩墩 */
  --radius: 18px;       /* 圆角卡片 */
}

圆角 + 柔和阴影 + 大留白，能包住几个调性不同的产品而不打架。

博客用 @nuxt/content 管

文章就是 content/blog/*.md 文件，frontmatter 写元信息，正文用 Markdown：

---
title: 文章标题
date: 2026-07-18
tag: 开发日志
description: 一句话摘要
---

正文……

列表页取数据：

const { data: posts } = await useAsyncData('blog', () =>
  queryContent('/blog').sortBy('date', 'desc').find()
)

详情页渲染正文用 <ContentRenderer :value="post" />，构建期生成，SEO 天然好，发文章就是一次 git 提交。

小结

整套站第一个版本只花了一晚上的骨架时间。接下来会把真实内容与更新日志一点点填进去——官网不是一次写好的，是持续喂养的。