简介

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

¥Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

我们做了一切，以便你可以从一开始就编写 .vue 文件，同时在开发过程中享受模块热替换，并在生产环境中默认使用服务器端渲染，打造高性能应用。

¥We made everything so you can start writing .vue files from the beginning while enjoying hot module replacement in development and a performant application in production with server-side rendering by default.

Nuxt 不受供应商锁定，允许你将应用部署到 无处不在，即使在边缘。

¥Nuxt has no vendor lock-in, allowing you to deploy your application everywhere, even on the edge.

自动化和约定

¥Automation and Conventions

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

¥Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.

• 基于文件的路由：根据 pages/ 目录 的结构定义路由。这可以让你更轻松地组织应用，并避免手动配置路由。
• 代码拆分：Nuxt 会自动将你的代码拆分成更小的块，这有助于减少应用的初始加载时间。
• 开箱即用的服务器端渲染：Nuxt 内置了服务器端渲染 (SSR) 功能，因此你无需自行设置服务器。
• 自动导入：在各自的目录中编写 Vue 可组合项和组件，无需导入即可使用，同时还能享受 tree-shaking 和优化 JS 包的优势。
• 数据获取实用程序：Nuxt 提供了可组合项来处理与 SSR 兼容的数据抓取以及不同的策略。
• 零配置 TypeScript 支持：使用我们自动生成的类型和 tsconfig.json，无需学习 TypeScript 即可编写类型安全的代码。
• 已配置的构建工具：我们默认使用 Vite 来支持开发中的热模块替换 (HMR)，并将最佳实践融入到生产环境中。

Nuxt 负责处理这些工作，并提供前端和后端功能，让你可以专注于重要的事情：创建你的 Web 应用。

¥Nuxt takes care of these and provides both frontend and backend functionality so you can focus on what matters: creating your web application.

服务器端渲染

¥Server-Side Rendering

Nuxt 默认内置了服务器端渲染 (SSR) 功能，无需自行配置服务器，这对 Web 应用有很多好处：

¥Nuxt comes with built-in server-side rendering (SSR) capabilities by default, without having to configure a server yourself, which has many benefits for web applications:

• 更快的初始页面加载时间：Nuxt 将完整渲染的 HTML 页面发送到浏览器，可立即显示。这可以提供更快的页面加载时间和更好的用户体验 (UX)，尤其是在网络或设备速度较慢的情况下。
• 改进的 SEO：搜索引擎可以更好地索引服务器端渲染页面，因为 HTML 内容可以立即使用，而无需 JavaScript 在客户端渲染内容。
• 在低功耗设备上性能更佳：它减少了客户端需要下载和执行的 JavaScript 代码量，这对于处理繁重 JavaScript 应用的低功耗设备非常有利。
• 更佳的可访问性：内容在页面初始加载时立即可用，从而提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
• 更轻松的缓存：页面可以在服务器端缓存，这可以通过减少生成和发送内容到客户端所需的时间来进一步提高性能。

总体而言，服务器端渲染可以提供更快、更高效的用户体验，并提升搜索引擎优化和可访问性。

¥Overall, server-side rendering can provide a faster and more efficient user experience, as well as improve search engine optimization and accessibility.

由于 Nuxt 是一个多功能框架，它允许你使用 nuxt generate 将整个应用静态渲染到静态托管服务器，使用 ssr: false 选项全局禁用 SSR，或通过设置 routeRules 选项来利用混合渲染。

¥As Nuxt is a versatile framework, it gives you the possibility to statically render your whole application to a static hosting with nuxt generate, disable SSR globally with the ssr: false option or leverage hybrid rendering by setting up the routeRules option.

服务器引擎

¥Server engine

Nuxt 服务器引擎 Nitro 解锁了新的全栈功能。

¥The Nuxt server engine Nitro unlocks new full-stack capabilities.

在开发过程中，它使用 Rollup 和 Node.js 工作器来隔离服务器代码和上下文。它还会通过读取 server/api/ 中的文件和 server/middleware/ 中的服务器中间件来生成服务器 API。

¥In development, it uses Rollup and Node.js workers for your server code and context isolation. It also generates your server API by reading files in server/api/ and server middleware from server/middleware/.

在生产环境中，Nitro 会将你的应用和服务器构建到一个通用的 .output 目录中。此输出为轻量级：已最小化并从所有 Node.js 模块（polyfill 除外）中移除。你可以将此输出部署到任何支持 JavaScript 的系统上，包括 Node.js、无服务器、Workers、边缘渲染或纯静态系统。

¥In production, Nitro builds your app and server into one universal .output directory. This output is light: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static.

生产就绪

¥Production-ready

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

¥A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be hosted in static environments, or deployed to serverless and edge providers.

模块化

¥Modular

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

¥A module system allows to extend Nuxt with custom features and integrations with third-party services.

架构

¥Architecture

Nuxt 由不同的 核心包 组成：

¥Nuxt is composed of different core packages:

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

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

¥We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.