介绍

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

我们做了大量工作，让你可以从一开始就编写 .vue 文件，同时在开发中享受热模块替换（HMR），在生产中默认使用服务端渲染以获得高性能的应用。

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

自动化与约定

Nuxt 使用约定和有意见的目录结构来自动化重复性任务，让开发者专注于实现功能。配置文件仍可用于自定义和覆盖默认行为。

• 基于文件的路由： 根据你的app/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 的服务端引擎 Nitro 解锁了新的全栈功能。

在开发时，它为你的服务器代码和上下文隔离使用 Rollup 和 Node.js worker。它还会通过读取 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/rspack-builder 和 @nuxt/webpack-builder
• 命令行工具： @nuxt/cli
• 服务端引擎： nitro
• 开发工具包： @nuxt/kit

我们建议阅读每个概念以全面了解 Nuxt 的能力以及各个包的范围。