什么是Nuxt？

> 本文为官方文档页面翻译，官方文档页面：【[Installation](https://nuxt.com/docs/getting-started/installation)】

## 介绍
Nuxt 的目标是使 Web 开发变得直观且高效，并考虑到出色的开发人员体验。

Nuxt 是一个免费的开源框架，以直观且可扩展的方式使用 [Vue.js](https://vuejs.org/) 创建类型安全、高性能和生产级的全栈 Web 应用程序和网站。

我们做了一切准备，以便您可以`.vue`从头开始编写文件，同时享受开发中的热模块替换和默认情况下服务器端渲染的高性能应用程序。

Nuxt 没有供应商锁定，允许您[**在任何地方部署应用程序，甚至在边缘**](https://nuxt.com/blog/nuxt-on-the-edge)。

如果您想在浏览器中使用 Nuxt，您可以[在我们的在线沙箱之一中尝试一下](https://nuxt.com/docs/getting-started/installation#play-online)。

<!-- more -->

## 自动化和约定

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

-   **基于文件的路由：根据**[目录](https://nuxt.com/docs/guide/directory-structure/pages)结构定义路由。这可以使您更轻松地组织应用程序并避免手动配置路由。
-   **代码分割：** Nuxt 自动将您的代码分割成更小的块，这有助于减少应用程序的初始加载时间。
-   **开箱即用的服务器端渲染：** Nuxt 带有内置的 SSR 功能，因此您不必自己设置单独的服务器。
-   **自动导入：**在各自的目录中编写 Vue 可组合项和组件并使用它们，而无需导入它们，并具有 tree-shaking 和优化的 JS 包的优点。
-   **数据获取实用程序：** Nuxt 提供可组合项来处理 SSR 兼容的数据获取以及不同的策略。
-   **零配置 TypeScript 支持：** 编写类型安全代码，无需使用我们自动生成的类型学习 TypeScript`tsconfig.json`
-   **配置的构建工具：** 我们默认使用[Vite](https://vitejs.dev/)支持开发中的热模块替换 (HMR)，并通过内置的最佳实践捆绑您的代码以进行生产。

Nuxt 负责处理这些问题并提供前端和后端功能，以便您可以专注于重要的事情：**创建您的 Web 应用程序**。

## 服务器端渲染

Nuxt 默认内置了服务器端渲染（SSR）功能，无需自己配置服务器，这对于 Web 应用程序有很多好处：

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

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

由于 Nuxt 是一个多功能框架，它使您可以使用 静态渲染整个应用程序到静态托管`nuxt generate`，使用该选项全局禁用 SSR`ssr: false`或通过设置该`routeRules`选项利用混合渲染。

### 服务器引擎

Nuxt 服务器引擎[Nitro](https://nitro.unjs.io/)解锁了新的全栈功能。

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

在生产中，Nitro 将您的应用程序和服务器构建到一个通用`.output`目录中。此输出很轻：缩小并从任何 Node.js 模块（除了 polyfills）中删除。您可以将此输出部署在任何支持 JavaScript 的系统上，无论是 Node.js、Serverless、Workers、边缘渲染还是纯静态。

### 生产就绪

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

### 模块化的

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

### 构建组件

[Nuxt由不同的核心包](https://github.com/nuxt/nuxt/tree/main/packages)组成：

-   核心引擎：[nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
-   捆绑器：[@nuxt/vite-builder](https://github.com/nuxt/nuxt/tree/main/packages/vite)和[@nuxt/webpack-builder](https://github.com/nuxt/nuxt/tree/main/packages/webpack)
-   命令行界面：[nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
-   服务器引擎：[硝基](https://github.com/unjs/nitro)
-   开发套件：[@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
-   Nuxt 2 桥：[@nuxt/bridge](https://github.com/nuxt/bridge)

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