介绍

Nuxt 的目标是让 Web 开发更直观、高性能，同时提供优秀的开发者体验。

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

我们做了所有能做的事，让你从一开始就能写 .vue 文件，在开发时享受热模块替换（HMR），在生产环境默认获得服务端渲染的高性能应用。

Nuxt 没有厂商锁定，你可以将应用部署到任何地方，甚至边缘节点。

如果你想在浏览器里体验 Nuxt，可以在线沙箱中尝试。

自动化与约定

Nuxt 采用约定优于配置的方式，通过结构化的目录布局自动处理重复性工作，让开发者专注于功能开发。配置文件仍然可以自定义和覆盖默认行为。

  • 基于文件的路由： 根据 app/pages/ 目录的结构自动定义路由，让你更轻松地组织应用，无需手动配置路由。
  • 代码分割： Nuxt 自动将代码拆分为更小的 chunk，帮助减少应用的初始加载时间。
  • 开箱即用的服务端渲染： Nuxt 内置 SSR 能力，无需自己搭建服务器。
  • 自动导入： 在对应目录中编写 Vue composables 和组件，直接使用而无需手动 import，同时享有 tree-shaking 和优化后的 JS 包体积。
  • 数据获取工具： Nuxt 提供 composables 来处理 SSR 兼容的数据获取，支持多种策略。
  • 零配置 TypeScript 支持： 自动生成类型和 tsconfig.json，无需学习 TypeScript 就能写出类型安全的代码。
  • 预配置的构建工具： 默认使用 Vite，开发时支持热模块替换（HMR），生产打包内置最佳实践。

Nuxt 帮你处理了这些底层工作，同时提供前端和后端能力，让你专注于最重要的事：创建你的 Web 应用。

服务端渲染

Nuxt 默认内置服务端渲染（SSR）能力，无需自己配置服务器，这为 Web 应用带来诸多好处：

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

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

作为一个多功能框架，Nuxt 还支持：

  • 用 nuxt generate 将整个应用静态渲染到静态托管
  • 用 ssr: false 全局禁用 SSR
  • 通过 routeRules 配置混合渲染模式

服务引擎

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

开发环境下，它使用 Rollup 和 Node.js worker 运行服务端代码并隔离上下文，同时通过读取 server/api/ 和 server/middleware/ 目录自动生成服务端 API 和中间件。

生产环境下，Nitro 将应用和服务端构建到统一的 .output 目录。产物非常轻量：经过压缩，不依赖任何 Node.js 模块（除了 polyfill）。你可以将这个产物部署在任何支持 JavaScript 的环境上——Node.js、Serverless、Workers、边缘渲染，甚至纯静态。

生产就绪

Nuxt 应用可以部署在 Node 或 Deno 服务器上，预渲染后托管在静态环境，或者部署到 Serverless 和边缘平台。

模块化

模块系统让你可以用自定义功能扩展 Nuxt，并集成第三方服务。

架构

Nuxt 由多个核心包组成：

建议阅读每个概念文档，全面了解 Nuxt 的能力和各包的职责范围。