介绍
Nuxt 是一个免费且开源的框架,提供了一种直观且可扩展的方式,使用 Vue.js 创建类型安全、高性能、生产级的全栈 web 应用和网站。
我们让你从一开始就能编写 .vue
文件,同时在开发中享受热模块替换,并在生产环境中通过默认的服务器端渲染获得高性能应用。
Nuxt 不绑定任何供应商,允许你将应用部署到任何地方,甚至边缘节点。
自动化与约定
Nuxt 使用约定和有主见的目录结构来自动化重复任务,让开发者专注于功能开发。配置文件仍可自定义和覆盖其默认行为。
- 基于文件的路由: 根据你的
pages/
目录结构 定义路由,使得应用组织更简单,避免手动配置路由的麻烦。 - 代码拆分: Nuxt 自动将代码拆分成更小的块,有助于减少应用的初始加载时间。
- 开箱即用的服务器端渲染: Nuxt 内置 SSR 功能,无需你自己搭建额外服务器。
- 自动导入: 在各自目录编写 Vue 组合函数和组件,无需显式导入,享受摇树优化和优化后的 JS 包。
- 数据获取工具: Nuxt 提供组合函数,支持 SSR 兼容的数据获取及多种策略。
- 零配置 TypeScript 支持: 借助自动生成的类型和
tsconfig.json
,无需学习 TypeScript 即可编写类型安全的代码。 - 配置好的构建工具: 默认为你使用 Vite,支持开发中的热模块替换(HMR)和生产环境的最佳实践打包。
Nuxt 处理了这些细节,提供前后端功能,让你专注于最重要的事情:创建你的 web 应用。
服务器端渲染
Nuxt 默认内置服务器端渲染(SSR)功能,无需自行配置服务器,这为 web 应用带来了诸多好处:
- 更快的初始页面加载: Nuxt 发送完整渲染的 HTML 页面给浏览器,可立即显示,尤其在较慢网络或设备上,带来更快的感知加载时间和更佳用户体验(UX)。
- 提升 SEO: 搜索引擎能更好地索引 SSR 页面,因为 HTML 内容可立即获取,而无需依赖客户端的 JavaScript 渲染。
- 低性能设备的更佳表现: 减少客户端需下载和执行的 JavaScript,适合处理能力有限的设备。
- 更好的无障碍访问: 内容初次加载即可获得,提升依赖屏幕阅读器或其他辅助技术用户的访问体验。
- 更简单的缓存: 页面可在服务器端缓存,进一步提升性能,减少生成和传输内容的时间。
总体而言,服务器端渲染提供更快、更高效的用户体验,同时优化搜索引擎优化和无障碍功能。
作为一个多功能框架,Nuxt 允许你使用 nuxt generate
将整个应用静态渲染到静态托管,或通过设置 ssr: false
全局禁用 SSR,也可以通过配置 routeRules
选项实现混合渲染。
服务器引擎
Nuxt 的服务器引擎 Nitro 破解了全栈新能力。
开发时,它使用 Rollup 和 Node.js worker 处理服务器端代码和上下文隔离。通过读取 server/api/
中的文件生成服务器 API,读取 server/middleware/
生成服务器中间件。
生产时,Nitro 会将应用和服务器构建到一个通用的 .output
目录。该输出体积轻巧:代码压缩且剔除所有 Node.js 模块(多态填充除外),可部署到任何支持 JavaScript 的环境,包括 Node.js、Serverless、Workers、边缘渲染或纯静态环境。
生产就绪
Nuxt 应用可部署到 Node 或 Deno 服务器,预渲染后托管于静态环境,或部署至 Serverless 与边缘服务提供商。
模块化
模块系统允许通过自定义功能和第三方服务集成扩展 Nuxt。
架构
Nuxt 由不同的核心包组成:
- 核心引擎: nuxt
- 打包器: @nuxt/vite-builder, @nuxt/rspack-builder 和 @nuxt/webpack-builder
- 命令行接口: @nuxt/cli
- 服务器引擎: nitro
- 开发工具包: @nuxt/kit
我们建议阅读各个概念以全面了解 Nuxt 的能力及每个包的职责范围。