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

in STEEM CN/中文7 days ago

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 <project-name>
 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基本要手动组装,这在开发效率上就相差很大。

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