Nuxt 4.0新版发布,新特性体验!
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基本要手动组装,这在开发效率上就相差很大。
一点开发体会,仅供参考。