介绍

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

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

Nuxt 没有供应商锁定，您可以将应用程序部署到任何地方，甚至是在边缘。

自动化与约定

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

• 文件系统路由：根据 app/pages/ 目录的结构定义路由。这可以使应用程序的组织更容易，并避免手动配置路由的需要。
• 代码分割： Nuxt 自动将您的代码分割成更小的块，这有助于减少应用程序的初始加载时间。
• 开箱即用的服务器端渲染： Nuxt 内置 SSR 功能，因此您无需自己设置单独的服务器。
• 自动导入： 在各自的目录中编写 Vue 可组合函数和组件，无需导入即可使用，同时享受摇树优化和优化的 JS 包带来的好处。
• 数据获取工具： Nuxt 提供了可组合函数来处理与 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 worker 来处理您的服务器代码和上下文隔离。它还通过读取 server/api/ 中的文件和 server/middleware/ 中的服务器中间件来生成您的服务器 API。

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

生产就绪

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

模块化

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

架构

Nuxt 由不同的核心包:

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

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