介绍 Introduction

Nuxt的目标是以出色的开发者体验为前提，使Web开发变得直观且高性能。

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

我们做了一切，因此您可以从头开始编写 .vue 文件，同时享受开发中的热模块替换和生产中默认使用服务器端渲染的高性能应用程序。

Nuxt不会限制您部署应用程序的位置，因此您可以将应用程序部署在网络边缘，从而实现更快的访问速度和更低的延迟。

自动化和预置

简单说就是Nuxt已经帮你预置好了一些文件和目录结构。 Nuxt 使用已约定的和预置的目录结构来自动执行重复性任务，并允许开发人员专注于推送功能。 配置文件仍然可以自定义和覆盖其默认行为。

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

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

服务器端渲染

Nuxt 默认自带服务器端渲染(SSR)能力，无需自己配置服务器，这对 Web 应用有很多好处：

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

总的来说，服务器端呈现可以提供更快、更高效的用户体验，并改善搜索引擎优化和可访问性。

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

阅读有关 Nuxt 渲染模式 的更多信息。

服务器引擎

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

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

在生产环境中，Nitro 将您的应用程序和服务器构建到一个通用的.output目录中。 这个输出很轻：缩小并从任何 Node.js 模块(polyfills 除外)中删除。 您可以在任何支持 JavaScript 的系统上部署此输出，包括 Node.js、无服务器、Workers、边缘端渲染或纯静态。

阅读有关 Nuxt 服务器引擎 的更多信息。

生产就绪

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

在 部署部分 中发现更多信息。

模块化的

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

了解有关 模块 的更多信息。

核心结构

Nuxt由不同的核心包组成：

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