介绍
Nuxt3
开源的高性能混合型 Vue 框架。
前言
Nuxt 3测试版于2021年10月12日发布,引入了基于Vue 3、Vite和Nitro的Foundation。六个月后,Nuxt 3的第一个候选版本发布,代码为“Mount Hope”🚀。
自beta测试以来,Nuxt合并了1000多个pull请求,解决了900多个问题,提交了2000多个,看到了3600多个开源库。 有超过160个贡献者,并且在6个月内获得了5000多颗星星和34万以上的下载量💚
一个新的foundation
Vue 3 & TypeScript
Vue 3已经发布3个月了,它带来了更好的性能、复合API和TypeScript支持。Nuxt 3建立在这些改进的基础上,提供了一流SSR支持的Vue 3体验。
由于Nuxt 3是用TypeScript重写的,它是完全键入的,并提供了有用的快捷方式,以确保你在编码时能够获得准确的类型信息。
在此基础上,Nuxt会自动生成一个TS配置(. Nuxt /tsconfig.json)和一个全局类型文件(. Nuxt / Nuxt .d.ts),让你获得零配置的完整TypeScript体验。
并且可以运行npx nuxi typecheck命令来手动检查Nuxt应用程序中的类型,如果愿意,甚至可以启用构建或开发类型检查。
Vite & Webpack
Vite是Nuxt应用程序的默认绑定器;也支持Webpack,它可以简化Nuxt 2项目的迁移。
要使用Webpack 5,需要在Nuxt配置中启用它,并安装@nuxt/webpack-builder:
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
builder: 'webpack' // default: 'vite'
})
新增插件系统
还创建了unjs/unplugin:一个用于构建工具的统一插件系统,它允许编写在Rollup、Vite和Webpack中工作的通用插件。
Nuxt已经为成为一个与构建者无关的框架奠定了基础,并且正在为JavaScript不断发展的生态系统做准备。
性能
其正在推进vite-node和Webpack lazyCompilation,为Nuxt应用的服务器包提供随需绑定:不管应用有多大,Nuxt总是会在几秒钟内启动。
Nitro & UnJS
Nuxt 3的主要特性之一是它新的服务器引擎unjs/nitro,这使Nuxt成为一个强大的完整堆栈和不依赖于提供商的框架。
Nuxt 2的第一个痛点是缺乏健壮的服务器集成。并且提供了serverMiddleware,但开发人员的体验并不好。它缺乏别名支持,而且不稳定。
其次,生产服务器没有在lambda环境中进行优化;启动时间慢,安装大小太大。
Nitro以多种功能将Nuxt提升到另一个水平:
- 更换服务器/目录热模块
- 服务器路由与文件系统类似的页面/目录
- 没有node_modules依赖的可移植且紧凑的部署
- 路由缓存和静态预渲染内置爬虫
- 代码分割和异步块加载快速服务器启动时间
这说明Nuxt 3和在项目中使用的所有东西现在都是devDependencies。Nitro将负责代码分割,并将所有内容打包到一个可移植的、紧凑的.output目录中,以便部署到任何托管提供商。
统一的JavaScript工具
其在一个新的GitHub组织UnJS中有一个更大的集合。这个组织提供了一套ESM友好的JavaScript工具,适合在任何JavaScript环境中运行,包括Node.js, Deno, Browsers和Workers。在这个基础上工作了4年多,他们正在逐步使Nuxt能够到处运行
强大的功能
文件系统自动化
Pages
这一切都从pages目录开始:每个文件都映射到一个路由。并且是前端框架生态系统中第一个支持动态和嵌套路由的。
保留了pages目录,改进了动态路由的语法,允许在单个路由中使用多个参数。而且,pages目录是可选的!可以只使用app.vue文件启动项目,Nuxt将使用一个最小的通用路由器,而不是优化包的大小(节省28kB,小21%)
插件
在创建主组件(app.vue)之前,插件目录中的每个文件都会被自动导入并运行。
组件
每个组件都可以在模板中使用,不需要导入。然后,Nuxt将分析代码,只包括在最终捆绑包中使用的组件,为生产带来良好的开发体验和性能
可组合
通过Vue 3和Composition API,其已经创建了一个新的可组合目录,可以自动将Vue可组合文件导入应用程序。
Public
静态目录已被重命名为public,并提供所有原始文件(如favicon.ico, robots.txt等)
Server
一个新的Server目录带来了强大的功能,可以向Vue应用程序添加服务器路由和后端逻辑。
模块
Nuxt公开了用于创建模块的强大API。
模块是在开发模式下启动nuxt或为生产构建项目时顺序运行的代码片段。它们允许封装、测试和共享自定义的解决方案作为npm包,而不用向你的项目本身添加不必要的样板。它们可以与Nuxt构建器的生命周期事件挂钩,提供运行时应用模板,更新配置或根据需要做任何其他自定义操作。并且改进了模块语法,以便在Nuxt版本之间提供更好的默认值、类型和兼容性
更多资讯内容请查看:nuxtjs.org/announcemen…