Nuxt 3 来了!

简介: NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个开源的框架,让 Web 开发变得简单而强大。Nuxt 3.0 来了,让我们一起来看看它有哪些让人激动的新特性!

先放个彩蛋,Nuxt3 官网鼠标互动的有趣小交互(https://nuxtjs.org/v3):

NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个开源的框架,让 Web 开发变得简单而强大。Nuxt 3.0 来了,让我们一起来看看它有哪些让人激动的新特性!


新特性!


Nuxt 3 的重构精简了内核,并且让速度更快,开发体验更好。

更轻量

以现代浏览器为目标的情况下,服务器部署和客户端产物最多可达 75 倍的减小。

更快

用动态服务端代码分割来优化冷启动,由 nitro 提供能力。

Hybrid

增量静态生成和其他高级模式现在都成为可能。

Suspense

导航前后皆任何组件中获取数据。

Composition API

使用 Composition API 和 Nuxt 3 的 composables 实现真正的可复用性。

Nuxt CLI

全新的零依赖体验,助您轻松搭建项目和集成模块。

Nuxt Devtools

更多的信息和快速修复,在浏览器中高效工作。

Nuxt Kit

全新的基于 TypeScript 和跨版本兼容的模块开发。

Webpack 5

更快的构建速度和更小的构建产物,并且零配置。

Vite

用 Vite 作为你的打包器,体验轻量级的快速 HMR。

Vue3

Vue3 会成为您下一个应用的坚实基础。

TypeScript

由原生 TypeScript 和 ESM 构成 —— 没有额外的步骤。


Nitro 引擎


我们在 Nuxt 的新服务端引擎 Nitro 上工作了整整 9 个月。它解锁了 Nuxt 服务端等方面新的全栈能力

在开发中,它使用 rollup 和 Node.js workers 来为服务端代码和上下文隔离服务。并且通过读取 server/api/ 目录下的文件和 server/functions 目录下的服务端函数来生成你的服务端 API

在生产中,它将您的 app 和服务端代码构建到独立的 .output 目录中。这份输出是很轻量的:代码是压缩的,并且移除了所有 Node.js 模块。你可以在任何支持 JavaScript 的系统下部署这份产物,Node.js、Severless、Workers、边缘渲染(Edge Side Rendering)或纯静态部署。

这份产物包含了运行时代码,来支持在任意环境下运行 Nuxt 服务端(包括实验性的浏览器 Service Workers!)的,并且启动静态文件服务,这使得它成为了一个符合 JAMStack 架构的真正的 hybrid 框架。另外还实现了一个原生存储层,支持多个源、驱动和本地资源。

Nitro 的基础是 rollup 和 h3:一个为高性能和可移植性而生的最小 http 框架。


Nuxt 桥梁


经过四年的开发,我们迁移到 Vue3,重写了 Nuxt,使它有了更坚实的基础,为未来的更多新特性做好准备。


流畅的升级到 Nuxt3


我们致力于在让用户更加轻松的从 Nuxt2 升级到 Nuxt3。

  • 遗留的插件和模块将保持工作
  • Nuxt2 配置是兼容的
  • 部分 pages options API 可用

将 Nuxt 3 的体验带到现有的 Nuxt2 项目中


当我们在开发 Nuxt 3 的新特性的同时,也将其中的一些特性移植到了 Nuxt 2 中。

  • 在 Nuxt2 中启用 Nitro
  • 在 Nuxt2 中使用 Composition API(和 Nuxt3 一样)
  • 在 Nuxt2 中使用新的 CLI 和 Devtools
  • 渐进式升级到 Nuxt3
  • 兼容 Nuxt2 的模块生态系统
  • 一片片的升级(Nitro、Composition API、Nuxt Kit)

感谢您的耐心,我们已经迫不及待的发布它,并且得到您的反馈 —— Nuxt 团队


官网原文地址


https://nuxtjs.org/v3

相关文章
|
JavaScript
Nuxt.js(Vue SSR)项目配置以及开发细节
Nuxt.js(Vue SSR)项目配置以及开发细节
242 0
浅谈一下Nuxt3中的layouts
继上一篇文章([nuxt3目录及使用 - 掘金 (juejin.cn)](https://juejin.cn/post/7199265829954715685))之后,我们继续学习Nuxt的相关使用。 # layouts 这次我们先引入一个layouts目录,这个目录是做什么的呢?我们在下面的使用中说清楚。 我们先在根目录下新建一个`layouts`目录,然后我们在`layouts`目录下新建一个`layout1.vue`文件,然后我们开始使用一下神奇的`layouts`。 内容如下: ``` <template> <header> <h1>
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
1397 0
|
1月前
|
数据采集 JavaScript 搜索推荐
ssr(Nuxt+Next.js)
服务器端渲染(SSR)技术可在服务器上生成页面HTML,提升首屏加载速度和SEO效果。Nuxt.js基于Vue.js,提供自动化路由管理、页面级数据获取和模块化扩展;Next.js基于React.js,支持SSR、静态生成和文件系统路由。两者均具备快速加载、SEO友好和处理复杂页面的优点,但也存在服务器压力大、开发限制和调试困难的缺点。开发者可根据项目需求和技术栈选择合适的框架。
|
3月前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
139 6
|
4月前
|
资源调度 JavaScript
不使用脚手架安装nuxt.js
【8月更文挑战第6天】
|
4月前
Nuxt项目的安装和使用
【8月更文挑战第7天】
45 2
|
5月前
|
JavaScript 安全 网络安全
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
Nuxt.js 速成(含使用宝塔实现nuxt项目部署)
603 0
|
5月前
electron-vue 常用配置
electron-vue 常用配置
38 0
|
7月前
|
前端开发 API
nuxt.config.js 配置
我们在使用Nuxt.js提供的create-nuxt-app 创建项目后,更希望对它自定义一些东西,这里我们可以在根目录下找到nuxt.config.js
192 7