简介

Nuxt 的目标是让 Web 开发变得直观且高效，同时注重开发者体验。

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

我们已经准备好一切，让你可以从一开始就编写 .vue 文件，同时在开发中享受热模块替换，在生产环境中默认享受服务器端渲染的高性能应用。

Nuxt 没有供应商锁定，允许你随处部署，甚至在边缘部署你的应用程序。

如果你想浏览器中尝试 Nuxt，可以在我们的在线沙箱中试用它。

自动化和约定

Nuxt 使用约定和有主见的目录结构来自动化重复任务，使开发者能够专注于推动功能。配置文件仍可自定义和覆盖其默认行为。

  • 基于文件的路由：根据 app/pages/ 目录的结构定义路由。这可以更容易地组织你的应用程序，避免手动配置路由的需要。
  • 代码分割：Nuxt 自动将你的代码分割成更小的块，这可以帮助减少应用程序的初始加载时间。
  • 开箱即用的服务器端渲染：Nuxt 内置了 SSR 功能，因此你无需自己设置单独的服务器。
  • 自动导入：在各自的目录中编写 Vue composables 和组件，并在不需要导入的情况下使用它们，享受 tree-shaking 和优化的 JS 包的好处。
  • 数据获取工具：Nuxt 提供 composables 来处理 SSR 兼容的数据获取以及不同的策略。
  • 零配置 TypeScript 支持：编写类型安全的代码，无需学习 TypeScript，使用我们自动生成的类型和 tsconfig.json。
  • 配置的构建工具：我们默认使用 Vite 来支持开发中的热模块替换（HMR）和以最佳实践构建代码用于生产。

Nuxt 负责这些并提供前端和后端功能，让你专注于最重要的事情：创建你的 Web 应用程序。

服务器端渲染

Nuxt 默认内置了服务器端渲染（SSR）功能，无需自己配置服务器，这对 Web 应用程序有很多好处：

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

总体而言，服务器端渲染可以提供更快、更高效的用户体验，以及改进搜索引擎优化和无障碍访问。

由于 Nuxt 是一个多功能的框架，它允许你使用 nuxt generate 将整个应用程序静态渲染到静态主机， 使用 ssr: false 选项全局禁用 SSR，或通过设置 routeRules 选项利用混合渲染。

服务器引擎

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

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

在生产环境中，Nitro 将你的应用程序和服务器构建到一个通用的 .output 目录中。此输出是轻量级的：经过压缩并从任何 Node.js 模块中删除（除了 polyfills）。你可以将此输出部署到任何支持 JavaScript 的系统，从 Node.js、Serverless、Workers、边缘渲染到纯静态。

在 Nitro 服务器 中阅读更多。

生产就绪

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

在 部署指南 中阅读更多。

模块化

模块系统允许你使用自定义功能和与第三方服务的集成来扩展 Nuxt。

在 Nuxt 模块概念 中阅读更多。

架构

Nuxt 由不同的核心包组成：

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

安装

使用我们的在线启动器快速开始使用 Nuxt,或者在终端中本地设置。