介绍

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

我们做了一切，让你从一开始就可以编写.vue文件，同时在开发中享受到热模块替换的便利，并在生产中获得高性能的应用，其中默认启用了服务器端渲染。

Nuxt没有供应商锁定，允许你将应用部署到任何地方，甚至是边缘。

自动化和约定

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

• 基于文件的路由: 根据pages/目录的结构定义路由。这样可以更容易地组织应用程序，避免手动配置路由的需要。
• 代码分割: Nuxt自动将代码拆分成较小的块，这有助于减少应用程序的初始加载时间。
• 内置服务器端渲染: Nuxt具备内置的服务器端渲染能力，因此你不需要自己设置单独的服务器。
• 自动导入: 在各自的目录中编写Vue组件和可组合函数，并在使用时无需手动导入，享受树摇和优化JS捆绑包的好处。
• 数据获取工具: 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以添加自定义功能和与第三方服务的集成。

架构

Nuxt由不同的核心包组成：

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

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