---
title: "介绍"
description: "Nuxt 的目标是在注重优秀开发者体验的前提下，使 Web 开发直观且高性能。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/getting-started/introduction"
---
# 介绍

> Nuxt 的目标是在注重优秀开发者体验的前提下，使 Web 开发直观且高性能。

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

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

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

<tip>

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

</tip>

## 自动化与约定

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

- **基于文件的路由：** 根据你的 [`app/pages/` 目录](https://nuxt.zhcndoc.com/docs/4.x/directory-structure/app/pages)结构定义路由。这可以让你更轻松地组织应用，并避免手动配置路由。
- **代码拆分：** Nuxt 会自动将代码拆分为更小的块，有助于缩短应用的初始加载时间。
- **开箱即用的服务端渲染：** Nuxt 内置 SSR 功能，因此你无需自行设置单独的服务器。
- **自动导入：** 在相应目录中编写 Vue 组合式函数和组件，即可直接使用，无需导入，同时还能享受 tree-shaking 和优化后的 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 量，这对可能难以处理大型 JavaScript 应用的低性能设备非常有利。
- **更好的可访问性：** 内容在初始页面加载时即可获得，提升依赖屏幕阅读器或其他辅助技术用户的可访问性。
- **更容易缓存：** 页面可以在服务器端缓存，这能进一步通过减少生成和发送内容到客户端的时间来提升性能。

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

由于 Nuxt 是一个多用途的框架，它允许你使用 `nuxt generate` 将整个应用静态渲染以部署到静态托管环境，使用 `ssr: false` 全局禁用 SSR，或通过设置 `routeRules` 选项来利用混合渲染。

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



</read-more>

### 服务端引擎

Nuxt 服务端引擎 [Nitro](https://nitro.build/) 解锁了全新的全栈能力。

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

在生产中，Nitro 会将你的应用和服务器构建到一个通用的 `.output` 目录中。该输出轻量化：进行了压缩并移除了任何 Node.js 模块（polyfill 除外）。你可以将此输出部署到任何支持 JavaScript 的系统，从 Node.js、Serverless、Workers、边缘渲染到纯静态平台。

<read-more title="Nuxt 服务端引擎" to="https://nuxt.zhcndoc.com/docs/4.x/guide/concepts/server-engine">



</read-more>

### 生产就绪

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

<read-more title="部署章节" to="https://nuxt.zhcndoc.com/docs/4.x/getting-started/deployment">



</read-more>

### 模块化

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

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



</read-more>

### 架构

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.