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

简介: 这篇文章介绍了作者使用Nuxt 4.0重构个性化站点导航网站的经历,阐述了Nuxt 4.0的新特性和优势,如更清晰的项目结构、更好的TypeScript体验、更快的CLI和开发速度等,并且分享了重构过程中的体验和项目完成效果。同时,作者还对比了Nuxt.js与Next.js两个框架的优劣,表达了自己对Nuxt.js的偏好。

前言

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

https://github.com/zhheo/halo-theme-heolink

经过仔细考量,恰逢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 的信息,可以查看官方博客:

https://nuxt.com/blog/v4

开发带来的变化

虽然官方有迁移工具,但我还是觉得重新新建一个全新的项目比较稳妥,因为我这个项目文件比较少,正好可以从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、 项目启动加载动画变成了这样,我觉得更加简洁好看了:
1ktqp0zaqv4wrxurqf1lyijqtyx92jdo.gif

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

https://tailwindcss.com/blog/tailwindcss-v4

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

pnpm create nuxt@latest <project-name>

项目重构

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

tgaxy1axuzlqaf9sucf0sgccra3t0asz.png

nlb0ykzvsogwg5lm3punrqxszafztz4j.png

hlfdsqfcrobsvwijng0ygjjuopzufagb.png

ttsp1uesfzmtzbwvk4y1jximwo1ybu8v.png

线上预览:

https://site.baiwumm.com/

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

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

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

PixPin_2025-08-06_14-53-54.png

总结

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

相关文章
|
JavaScript 前端开发
vue3瀑布流布局(使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的)
vue3瀑布流布局(使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的)
675 0
|
PHP Windows 编解码
windows命令行方式下打印和设置PATH变量
点击开始菜单,运行=》cmd打印当前变量:echo %PATH%结果:C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;d:\PROGRA~1\ssh;D:\Program Files\tortoisesvn\bin;D:\Program...
2691 0
|
6月前
|
人工智能 IDE JavaScript
MCP编程与AI的结合:基于Cursor的智能开发实践
本文介绍了如何通过将 Apifox MCP Server 与支持 AI 编程的 IDE(如 Cursor、VSCode + Cline 等)集成,实现 AI 直接读取和利用最新的 API 文档,从而大幅提升开发效率。文章详细说明了配置过程,包括获取 Apifox Access Token 和项目 ID,以及在 Cursor 中设置 MCP 配置的方法。此外,还展示了多个实际应用场景,例如快速生成模型代码、同步更新接口文档与代码、生成完整的 CRUD 操作、搜索 API 文档以及自动生成测试用例。
|
资源调度 JavaScript 前端开发
搭建和部署nuxt项目
【8月更文挑战第4天】
|
数据采集 搜索推荐 开发者
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
这篇文章介绍了如何为Nuxt.js项目添加favicon图标和TDK(标题、描述、关键词),安装@nuxtjs/seo模块,以及如何设置Robots、Sitemap、OG Image、Schema.org、Experiments等。文章还提到了添加Google Analytics、Microsoft Clarity和Umami统计代码的方法。文章最后总结称,Nuxt.js 3集成了很多SEOModules,使开发者能够更加高效便捷地做好搜索引擎方面的优化。
661 0
Nuxt3 实战 (十二):SEO 搜索引擎优化指南
|
JavaScript 安全 网络安全
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
1338 0
|
资源调度 JavaScript 前端开发
搭建和部署nuxt项目
【8月更文挑战第8天】
449 0
|
JavaScript 算法 定位技术
利用Cesium和JS实现地点点聚合功能
利用Cesium和JS实现地点点聚合功能
513 0
|
移动开发 JavaScript Android开发
H5封装和原生开发这两种不同的应用开发方式有什么区别?
原生开发是指为特定操作系统(如iOS或Android)开发应用程序。整个应用程序代码,逻辑和界面都是按照该系统提供的规范来开发,因此其性能和体验感会很好,可以与设备充分融洽,提供流畅的用户体验。原生开发App充分的利用了操作系统的功能,给设备上的应用程序提供了高性能和良好的用户体验。原生应用程序拥有很好的设备兼容性,可以直接访问设备的硬件功能等,如相机,蓝牙等。
232 1