Nuxt3 介绍

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

自动化和约定

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

• 基于文件的路由:根据pages/目录的结构定义路由,这样可以更容易的组织应用程序,避免手动配置路由的需要

• 代码分割: Nuxt 自动将代码分成较小的块,这有助于减少应用程序的初始加载时间

• 内置服务器端渲染:Nuxt 具备内置的服务器端渲染能力,因此你不需要自己设置单独的服务器

• 自动导入:在各自的目录中编写 Vue 组件和可组合函数,并在使用的时候无需手动导入

• 数据抓取工具: Nuxt 提供了可用于处理与服务器端渲染兼容的数据获取的可组合函数，以及不同的策略。

• 零配置的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 工作线程来处理你的服务器代码和上下文隔离。它还通过读取

server/api中的文件生成你的服务器 API,以及读取server/middleware中的文件生成服务器中间件

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

生产就绪

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

模块化

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