Nuxt4.0初体验：一个简约、精美、现代化的个人站点导航！

前言

最近想搭建一个个性化的站点导航网站，用于收藏和展示自己喜欢的个人站点。在GitHub上调研了一番，最初被洪老师的一个项目吸引，但发现它需要依赖Halo主题且自定义空间有限，最终决定放弃使用。

经过仔细考量，恰逢Nuxt.js官方正式发布Nuxt 4.0。这个时机简直完美！我当即决定基于Nuxt 4.0重构之前的Dream Site项目——既能满足我的功能需求，又能体验最新框架特性，可谓一举两得。

去年我曾用 Nuxt 3.0 搭建过 Dream Site 项目，但当时 Nuxt.js 的生态还不够成熟，API 也存在不少 Bug，在简单体验后便没再深入关注。如今 Nuxt 4.0 正式发布，无论是稳定性还是功能都更加完善，正好借此机会重新探索一番，看看它的进步有多大！

Nuxt4.0新特性

🗂️ 新项目结构

my-nuxt-app/
├─ app/
│  ├─ assets/
│  ├─ components/
│  ├─ composables/
│  ├─ layouts/
│  ├─ middleware/
│  ├─ pages/
│  ├─ plugins/
│  ├─ utils/
│  ├─ app.vue
│  ├─ app.config.ts
│  └─ error.vue
├─ content/
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts

项目文件夹结构更加清晰、语义化更好！

🔧 更好的 TypeScript 体验

Nuxt 现在为您的应用程序代码、服务器代码、shared/ 文件夹和构建器代码创建单独的 TypeScript 项目。这应该意味着在不同上下文中工作时，更好的自动完成、更准确的类型推断和更少的令人困惑的错误。

使用 Nuxt 4，您只需要在项目根目录中一个 tsconfig.json 文件！

⚡ 更快的 CLI 和开发

• 更快的冷启动 - 开发服务器启动明显更快

• Node.js compile cache - 自动重用 v8 编译缓存

• 本机文件监视 - 使用 fs.watch API 来减少系统资源

• 基于套接字的通信 - CLI 和 Vite 开发服务器现在通过内部套接字而不是网络端口进行通信，从而减少了开销——尤其是在 Windows 上

更多关于 Nuxt4.0 的信息，可以查看官方博客：

开发带来的变化

虽然官方有迁移工具，但我还是觉得重新新建一个全新的项目比较稳妥，因为我这个项目文件比较少，正好可以从0到1体验 Nuxt4.0 带来的变化。

1. @nuxt/eslint 使用了 9.x 版本，配置文件变成了 eslint.config.mjs ：

import withNuxt from "./.nuxt/eslint.config.mjs";

export default withNuxt(
  // 自定义配置
);

2. 现在 TypeScript 只需要一个 tsconfi.json 文件：

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}

3. 项目启动加载动画变成了这样，我觉得更加简洁好看了：

4. 关于 UI 组件，我选择了官方的 NuxtUI，现在的 NuxtUI 的设计和用户体验方面好了许多，而且 3.0 版本全面支持 Tailwind CSS v4，这是一个很大的变化，关于 Tailwind CSS v4 的更多信息：

总的来说，Nuxt4.0 的变化还是很大的，有兴趣的伙伴可以新建项目体验一下：

pnpm create nuxt@latest <project-name>

项目重构

在做好所有准备之后，我着手开始重构项目，首先先备份一下 Nuxt3.0 的分支，然后用主分支基于 Nuxt4.0 重构，整个重构的过程就不过多叙述了，大家可以看我项目完成的效果：

线上预览：

Nuxt.js 与 Next.js：框架之争与个人之选

作为同时使用过 Nuxt.js 和 Next.js 的个人开发者，我认为这两个框架的优劣之争并没有标准答案——它们各有特点，选择更多取决于开发者的偏好和项目需求。

对我而言，Nuxt.js 最吸引人的是其强大的 Modules 生态系统。这个由 Nuxt 官方团队和 1730+ 社区开发者共同维护的模块库，让项目搭建变得异常高效：只需安装所需模块、简单配置即可投入使用。这种"开箱即用"的特性不仅大幅提升了开发效率，更带来了极其愉悦的开发体验。

总结

从 Nuxt 3.0 到 4.0 的重构之旅让我深刻感受到了框架的进步——更稳定的 API、更流畅的开发体验，以及更完善的生态支持。模块化设计让功能扩展变得轻松，而性能优化也让站点加载更快。这次升级不仅让项目更加健壮，也让我对 Nuxt 的未来充满期待！

调研