---
title: "介绍"
description: "Nuxt 的目标是以优秀的开发者体验为核心，使网页开发直观且高性能。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/getting-started/introduction"
---
# 介绍

> Nuxt 的目标是以优秀的开发者体验为核心，使网页开发直观且高性能。

Nuxt 是一个免费且[开源的框架](https://github.com/nuxt/nuxt)，提供了一种直观且可扩展的方式，使用 [Vue.js](https://vue.zhcndoc.com) 创建类型安全、高性能、生产级的全栈 Web 应用和网站。

我们让你从一开始就能编写 `.vue` 文件，同时在开发中享受热模块替换，并在生产环境中通过默认的服务器端渲染获得高性能应用。

Nuxt 不绑定任何供应商，允许你将应用部署到[**任何地方，甚至边缘节点**](https://nuxt.zhcndoc.com/blog/nuxt-on-the-edge)。

::tip
如果你想在浏览器中体验 Nuxt，可以[在我们的在线沙盒中试用](https://nuxt.zhcndoc.com/docs/3.x/getting-started/installation#play-online)。
::

## 自动化与约定

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

- **基于文件的路由：** 根据你的 [`pages/` 目录](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages)结构定义路由。这有助于更轻松地组织应用，并避免手动配置路由。
- **代码拆分：** Nuxt 会自动将代码拆分为更小的代码块，有助于缩短应用的初始加载时间。
- **开箱即用的服务器端渲染：** Nuxt 内置 SSR 功能，因此你无需自行设置单独的服务器。
- **自动导入：** 在相应目录中编写 Vue 组合式函数和组件，即可直接使用，无需导入，同时享受摇树优化和优化后的 JS 包带来的好处。
- **数据获取工具：** Nuxt 提供组合式函数，用于处理兼容 SSR 的数据获取以及不同的策略。
- **零配置 TypeScript 支持：** 借助自动生成的类型和 `tsconfig.json`，无需学习 TypeScript 即可编写类型安全的代码。
- **已配置的构建工具：** 我们默认使用 [Vite](https://vite.dev)，以便在开发中支持热模块替换（HMR），并使用内置的最佳实践将代码打包用于生产环境。

Nuxt 处理了这些细节，提供前后端功能，让你专注于最重要的事情：**创建你的 Web 应用**。

## 服务器端渲染

Nuxt 默认内置服务器端渲染（SSR）功能，无需自行配置服务器，这为 Web 应用带来了诸多好处：

- **更快的初始页面加载：** Nuxt 发送完整渲染的 HTML 页面给浏览器，可立即显示，尤其在较慢网络或设备上，带来更快的感知加载时间和更佳用户体验（UX）。
- **提升 SEO：** 搜索引擎能更好地索引 SSR 页面，因为 HTML 内容可立即获取，而无需依赖客户端的 JavaScript 渲染。
- **低性能设备的更佳表现：** 减少客户端需下载和执行的 JavaScript，适合处理能力有限的设备。
- **更好的无障碍访问：** 内容初次加载即可获得，提升依赖屏幕阅读器或其他辅助技术用户的访问体验。
- **更简单的缓存：** 页面可在服务器端缓存，进一步提升性能，减少生成和传输内容的时间。

总体而言，服务器端渲染提供更快、更高效的用户体验，同时优化搜索引擎优化和无障碍功能。

作为一个多功能框架，Nuxt 允许你使用 `nuxt generate` 将整个应用静态渲染到静态托管，或通过设置 `ssr: false` 全局禁用 SSR，也可以通过配置 `routeRules` 选项实现混合渲染。

::read-more{title="Nuxt 渲染模式" to="https://nuxt.zhcndoc.com/docs/3.x/guide/concepts/rendering"}
::

### 服务器引擎

Nuxt 的服务器引擎 [Nitro](https://nitro.zhcndoc.com/) 破解了全栈新能力。

开发时，它使用 Rollup 和 Node.js worker 处理服务器端代码和上下文隔离。通过读取 `server/api/` 中的文件生成服务器 API，读取 `server/middleware/` 生成服务器中间件。

生产时，Nitro 会将应用和服务器构建到一个通用的 `.output` 目录。该输出体积轻巧：代码压缩且剔除所有 Node.js 模块（多态填充除外），可部署到任何支持 JavaScript 的环境，包括 Node.js、Serverless、Workers、边缘渲染或纯静态环境。

::read-more{title="Nuxt 服务器引擎" to="https://nuxt.zhcndoc.com/docs/3.x/guide/concepts/server-engine"}
::

### 生产就绪

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

::read-more{title="部署章节" to="https://nuxt.zhcndoc.com/docs/3.x/getting-started/deployment"}
::

### 模块化

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

::read-more{title="Nuxt 模块概念" to="https://nuxt.zhcndoc.com/docs/3.x/guide/concepts/modules"}
::

### 架构

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/rspack-builder](https://github.com/nuxt/nuxt/tree/main/packages/rspack) 和 [@nuxt/webpack-builder](https://github.com/nuxt/nuxt/tree/main/packages/webpack)
- 命令行接口: [@nuxt/cli](https://github.com/nuxt/cli)
- 服务器引擎: [nitro](https://github.com/nitrojs/nitro)
- 开发工具包: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)

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


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.