从零搭建 Nuxt 4 门户

demo data

本文记录使用 Nuxt 4 搭建个人门户的完整过程。

为什么选择 Nuxt 4

• 约定式路由：页面即文件，无需手写路由表
• SSR 直出：SEO 友好，首屏更快
• Nitro 引擎：一套代码可部署到 Node、Serverless 或边缘节点

快速开始

pnpm dlx nuxi@latest init my-portal
cd my-portal
pnpm dev

数据获取

在页面中统一使用 useAsyncData 获取数据，保证服务端渲染直出：

const { data } = await useAsyncData("articles", () => $fetch("/api/articles"))

注意：不要用 onMounted 里补取数据，那样首屏 HTML 里不会有内容。

目录结构

以上就是搭建门户的第一步，后续会继续记录内容对接的过程。