v3.16
Nuxt on GitHub

简介

Nuxt 的目标是使网页开发直观且高效，同时注重出色的开发者体验。

Nuxt 是一个免费且开源框架，以直观且可扩展的方式，基于 Vue.js 创建类型安全、高性能且生产级的全栈网页应用和网站。

我们设计了一切，让你从一开始就能编写 .vue 文件，同时在开发中享受热模块替换（HMR），并在生产环境中获得默认支持服务器端渲染的高性能应用。

Nuxt 没有供应商锁定，允许你将应用部署到任何地方，甚至边缘计算。

如果你想在浏览器中体验 Nuxt，可以在我们的在线沙盒之一中尝试。

自动化与约定

Nuxt 使用约定和固定的目录结构来自动化重复性任务，让开发者专注于功能开发。配置文件仍然可以自定义和覆盖默认行为。

  • 基于文件的路由： 根据 pages/ 目录 的结构定义路由。这可以简化应用的组织，避免手动配置路由。
  • 代码分割： Nuxt 自动将代码分割成更小的块，有助于减少应用的初始加载时间。
  • 开箱即用的服务器端渲染： Nuxt 内置了 SSR 功能，无需自行设置单独的服务器。
  • 自动导入： 在对应目录中编写 Vue 组合式函数和组件，无需手动导入即可使用，同时享受树摇（tree-shaking）和优化的 JS 包。
  • 数据获取工具： Nuxt 提供了支持 SSR 的数据获取组合式函数以及多种策略。
  • 零配置 TypeScript 支持： 通过自动生成的类型和 tsconfig.json，无需深入学习 TypeScript 即可编写类型安全的代码。
  • 预配置的构建工具： 我们默认使用 Vite 支持开发中的热模块替换（HMR）并为生产环境打包代码，内置最佳实践。

Nuxt 处理了这些细节并提供前端和后端功能，让你专注于最重要的事情：创建你的网页应用。

服务器端渲染

Nuxt 默认内置了服务器端渲染（SSR）功能，无需自行配置服务器，这为网页应用带来了许多好处：

  • 更快的初始页面加载时间： Nuxt 向浏览器发送完全渲染的 HTML 页面，可立即显示。这能提供更快的感知加载时间和更好的用户体验（UX），尤其是在较慢的网络或设备上。
  • 改进的 SEO： 搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容是立即可用的，而无需依赖客户端 JavaScript 渲染内容。
  • 在低性能设备上的更好表现： 减少了需要在客户端下载和执行的 JavaScript 量，这对处理重型 JavaScript 应用可能有困难的低性能设备非常有益。
  • 更好的可访问性： 内容在初始页面加载时立即可用，提升了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
  • 更简单的缓存： 页面可以在服务器端缓存，进一步提高性能，减少生成和发送内容到客户端的时间。

总体而言，服务器端渲染可以提供更快、更高效的用户体验，同时改善搜索引擎优化和可访问性。

作为一款多功能的框架，Nuxt 允许你通过 nuxt generate 将整个应用静态渲染到静态托管环境，通过 ssr: false 选项全局禁用 SSR，或通过设置 routeRules 选项实现混合渲染。

阅读更多 Nuxt 渲染模式.

服务器引擎

Nuxt 的服务器引擎 Nitro 解锁了全新的全栈能力。

在开发中，它使用 Rollup 和 Node.js 工作线程来处理你的服务器代码和上下文隔离。它还会通过读取 server/api/ 中的文件生成服务器 API，以及从 server/middleware/ 生成服务器中间件。

在生产环境中，Nitro 将你的应用和服务器构建到一个通用的 .output 目录中。这个输出非常轻量：经过压缩并移除了所有 Node.js 模块（除了 polyfill）。你可以将这个输出部署到任何支持 JavaScript 的系统上，包括 Node.js、无服务器（Serverless）、Workers、边缘渲染或纯静态环境。

阅读更多 Nuxt 服务器引擎.

生产就绪

Nuxt 应用可以部署在 Node 或 Deno 服务器上，也可以预渲染后托管在静态环境中，或部署到无服务器和边缘提供商。

阅读更多 部署部分.

模块化

模块系统允许通过自定义功能和第三方服务集成来扩展 Nuxt。

阅读更多 Nuxt 模块概念.

架构

Nuxt 由多个核心包组成：

我们建议阅读每个概念，以全面了解 Nuxt 的能力和每个包的范围。