简介

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

我们已经完成了所有配置，因此您可以从一开始就编写 .vue 文件，同时享受开发过程中的热模块替换，以及默认情况下通过服务器端渲染在生产环境中获得高性能的应用程序。

Nuxt 没有厂商锁定，允许您将应用程序部署在任何地方，甚至包括 边缘计算环境。

自动化和约定

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

• 基于文件的路由： 根据您的 pages/ 目录 的结构定义路由。这可以更轻松地组织您的应用程序，并避免手动配置路由的需求。
• 代码分割： Nuxt 自动将您的代码分割成更小的块，这有助于减少应用程序的初始加载时间。
• 开箱即用的服务器端渲染： Nuxt 内置了 SSR 功能，因此您无需自己设置单独的服务器。
• 自动导入： 在各自的目录中编写 Vue composables 和组件，并在不导入它们的情况下使用它们，同时享受 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 数量，这对于可能难以处理大量 JavaScript 应用程序的低功耗设备非常有利。
• 更好的可访问性： 内容在初始页面加载时立即可用，从而提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
• 更轻松的缓存： 页面可以在服务器端缓存，这可以通过减少生成和向客户端发送内容所需的时间来进一步提高性能。

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

由于 Nuxt 是一个多功能的框架，它使您可以使用 nuxt generate 将整个应用程序静态渲染到静态主机，使用 ssr: false 选项全局禁用 SSR，或者通过设置 routeRules 选项来利用混合渲染，即通过 routeRules 为不同路由定制渲染策略，混合 SSG/SSR/SPA 模式。

服务器引擎

Nuxt 服务器引擎 Nitro 开启了新的全栈功能。

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

在生产环境中，Nitro 将您的应用程序和服务器构建到一个通用的 .output 目录中。此输出很轻巧：经过缩小并移除了所有 Node.js 模块（polyfill 除外）。您可以将此输出部署在任何支持 JavaScript 的系统上，从 Node.js、Serverless、Workers、边缘端渲染到纯静态。

生产就绪

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

模块化

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

架构

Nuxt 由不同的 核心包 组成：

• 核心引擎：nuxt
• 打包器：@nuxt/vite-builder 和 @nuxt/webpack-builder
• 命令行界面：@nuxt/cli
• 服务器引擎：nitro
• 开发工具包：@nuxt/kit

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