Nuxt 4.0新版发布,新特性体验!

@lemooljiang · 2025-08-01 10:46 · HIVE CN 中文社区

nuxt4.jpg https://nuxt.com/

Nuxt 4.0新版发布了!想着正好lark blog要更新下(升级为喵星),就想着迁移过来。lark blog一直在用,感觉还可以,只是一些功能还停留在vue2阶段,难有更新了。干脆趁此升级重塑!

新特性亮点

Nuxt 4 致力于让您的开发体验更流畅: - 更清晰的项目结构:全新的 app/ 目录结构 - 更智能的数据获取:我们借此机会解决了数据层的一些不一致问题并提升了性能 - 更强的 TypeScript 支持:通过项目级隔离区分应用代码、服务端代码、shared/ 文件夹和配置 - 更快的 CLI 和开发体验:采用内部 socket 通信和更快的 CLI

看看新特性还不错,试着安装测试了下,速度飞快!

安装

"nuxt": ^4.0.1 nodejs: v22.17.1

1. 直接到github下载模板, https://github.com/nuxt/starter/tree/v4

 - 也可以用npm安装
 npm create nuxt 
 eg:npm create nuxt nuxtstart

 - 更改配置: package.json ->  name

2. npm install --global yarn   //yarn --version  1.22.22
  yarn config set registry https://registry.npmmirror.com  切换到淘宝源
  yarn install

3. yarn dev
http://localhost:3000/ 

简单几步就可上手,真心不错啰。

使用体会

去年开发AIJoe时就从Vue迁移过来,开发体验倒也相差不是太大,就是服务端(server)和客户端(client)的概念让人头痛。Nuxt是服务端渲染,有一个水合的概念,这导致Vue的插件经常无法正常运行!

后来下了番苦功,彻底解决了这个问题,主要是认知服务端(server)和客户端(client)的概念。后面的开发自然是一马平川啰。

这次Nuxt 4.0的改动在用户的体感上主要是目录的重构,其它几乎没动,可以无痛升级。

Nuxt比Vue的优势在于其首页渲染更快,Vue的首页加载有时可能几分钟,体验感很差,而Nuxt的首页加载就很快。

其它的路由功能,函数设计,Nuxt也预先设计好了,根本就不用自己动手去构建!这就好比Nuxt提供了整车功能,你会开就行。而Vue基本要手动组装,这在开发效率上就相差很大。

一点开发体会,仅供参考。

#cn #cn-reader #frontend #nuxt #vue #nuxt4 #nodejs
Payout: 0.000 HBD
Votes: 44
More interactions (upvote, reblog, reply) coming soon.