介绍

Nuxt 是一个免费且开源的框架，它以直观且可扩展的方式，帮助你使用 Vue.js 创建类型安全、性能优异、可用于生产环境的全栈 Web 应用与网站。

我们做好了所有准备工作，让你可以从一开始就在编写 .vue 文件，同时享受开发环境下的热模块替换（HMR），以及生产环境下默认开启的服务端渲染（SSR）高性能应用。

Nuxt 没有厂商锁定（vendor lock-in），你可以将应用部署到任何地方，甚至边缘节点。

自动化与约定

Nuxt 通过约定和一套有主见的目录结构来自动完成重复性任务，让开发者能够专注于功能开发。你仍然可以通过配置文件来自定义和覆盖其默认行为。

• 基于文件的路由（File-based routing）： 根据你 app/pages/ 目录 的结构自动定义路由。这能让你的应用组织更清晰，也无需手动配置路由。
• 代码分割（Code splitting）： Nuxt 会自动将代码拆分为更小的块（chunk），有助于减少应用的初始加载时间。
• 开箱即用的服务端渲染： Nuxt 内置 SSR 能力，你无需自己搭建单独的服务器。
• 自动导入（Auto-imports）： 将 Vue composables 和组件写到对应目录，即可直接使用，无需手动导入，并享有 tree-shaking 和优化的 JS 包体积等优势。
• 数据获取工具： Nuxt 提供了 composables 来处理兼容 SSR 的数据获取，并支持多种策略。
• 零配置的 TypeScript 支持： 借助自动生成的类型和 tsconfig.json，你无需学习 TypeScript 即可编写类型安全的代码。
• 预配置的构建工具： 默认使用 Vite，在开发环境支持热模块替换（HMR），并在生产环境按照最佳实践打包你的代码。

Nuxt 同时提供前端和后端能力，让你专注于真正重要的事：创建你的 Web 应用。

服务端渲染（Server-Side Rendering）

Nuxt 默认内置服务端渲染（SSR）能力，你无需自己配置服务器，这对 Web 应用有诸多好处：

• 更快的首屏加载： Nuxt 会向浏览器发送一个完整渲染的 HTML 页面，可立即显示。这能带来更快的感知加载速度，并提升用户体验（UX），尤其是在较慢的网络或设备上。
• 更好的 SEO： 搜索引擎能更好地索引 SSR 页面，因为 HTML 内容立即可用，而无需依赖 JavaScript 在客户端渲染内容。
• 在低性能设备上表现更好： 减少了需要在客户端下载和执行的 JavaScript 量，这对处理重 JavaScript 应用吃力的低性能设备很有帮助。
• 更好的可访问性（accessibility）： 内容在首次加载时即可用，提升了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
• 更易于缓存： 页面可以在服务端缓存，通过减少生成和发送内容到客户端的时间进一步提升性能。

总体而言，服务端渲染能带来更快、更高效的用户体验，并改善搜索引擎优化与可访问性。

由于 Nuxt 是一个多用途框架，它还允许你通过 nuxt generate 将整个应用静态渲染到静态托管，通过 ssr: false 选项全局关闭 SSR，或借助 routeRules 选项实现混合渲染（hybrid rendering）。

服务端引擎（Server engine）

Nuxt 的服务端引擎 Nitro 解锁了新的全栈能力。

在开发环境，它使用 Rollup 和 Node.js workers 来运行你的服务端代码并实现上下文隔离。它还会读取 server/api/ 中的文件生成服务端 API，并从 server/middleware/ 读取服务端中间件。

在生产环境，Nitro 会将你的应用和服务端构建到一个通用的 .output 目录。这个输出非常轻量：经过压缩，并移除了所有 Node.js 模块（polyfills 除外）。你可以将这个输出部署到任何支持 JavaScript 的系统上，包括 Node.js、Serverless、Workers、边缘渲染（Edge-side rendering）或纯静态。

生产就绪（Production-ready）

Nuxt 应用可以部署到 Node 或 Deno 服务器，预渲染后托管到静态环境，或部署到 Serverless 与边缘服务商。

模块化（Modular）

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

架构（Architecture）

Nuxt 由不同的核心包组成：

• 核心引擎：nuxt
• 打包工具：@nuxt/vite-builder、@nuxt/rspack-builder 以及 @nuxt/webpack-builder
• 命令行工具：@nuxt/cli
• 服务端引擎：nitro
• 开发套件：@nuxt/kit

我们建议阅读每一个概念，以全面理解 Nuxt 的能力以及每个包的职责范围。