## 第 1 章：快速入手

### 1.1 Nuxt 4 核心优势与架构（SSR/SSG/ISR/CSR）

Nuxt 4 是基于 **Vue 3 + Vite + Nitro** 构建的**全栈框架**，也是目前企业开发内容平台、博客、小册、官网、电商的首选 Vue 框架。

它最大的特点：**一套代码，支持 4 种渲染模式，开箱即用、零配置、自带服务端**。

#### 四种渲染模式（做项目必懂）

1.  **SSR 服务端渲染**

页面在服务器生成完整 HTML 后返回浏览器，首屏快、SEO 最强。

适用：小册详情、文章页、首页。

2.  **SSG 静态站点生成**

构建时直接生成纯 HTML 文件，部署简单、访问极快。

适用：帮助文档、公告页、不常更新的页面。

3.  **ISR 增量静态再生**

结合 SSG 缓存 + SSR 动态更新，不用重新构建就能更新页面。

适用：小册、资讯、课程类内容。

4.  **CSR 客户端渲染**

传统 Vue 单页模式，由浏览器 JS 渲染。

适用：用户中心、后台管理、非 SEO 页面。

#### Nuxt 4 核心优势

- 开箱即用，无需手动配置路由、状态库、请求库

- 自动导入组件、API、工具函数，告别大量 import

- 置全栈能力，可直接写接口、连数据库

- 极致性能：Vite 热更新、打包体积小、运行流畅

- 企业级规范：TypeScript 全支持、目录统一、易于维护

### 1.2 环境准备：Node 20+ /yarn/ 编辑器 (如 VSCode , Trea)

#### 1，安装 Node.js（必须 20 及以上版本）

- 下载地址：https://nodejs.org/

- 检查版本命令：

```bash

node  -v  # 输出 v20.x.x 或更高 课程 版本号 v24.15.0

npm  -v  # 建议 9.x+ 课程 版本号 11.12.1

```

#### 2，安装 yarn（可选）

- 下载地址：https://yarnpkg.com/

- 检查版本命令：

```bash

yarn  -v  # 输出 1.x.x 或更高 课程 版本号 1.24.22

```

#### 3，编辑器使用（如 VSCode , Trea）

本教程用Trea编辑器，推荐使用。

- 下载地址：https://www.trae.cn/

安装插件

- Vue - Official（官方必装）

- Nuxt.js

- ESLint

- Prettier

- Tailwind CSS IntelliSense

环境统一后，项目创建、运行、部署不会出现兼容问题。

### 1.3 创建第一个 Nuxt 4 项目（npx nuxi init）

一行命令创建标准企业项目：

```bash

npx  nuxi@latest  init  my-nuxt4-app

```

简单说明（不用改）**选择minimal模板**

- minimal：官方推荐，最轻量，适合 99% 的项目

- content：做博客 / 文档专用（你没选也没关系，后面可以再加）

- module：开发插件用（普通项目不用）

- ui：带 UI 组件（新手反而复杂）

创建流程：

- 1，选择项目模板：minimal

- 2，选择包管理器：yarn

- 3，初始化 Git：no

- 4，是否安装模块:no

等待模板自动下载完成

```bash

cd  my-nuxt4-app

```

```bash

yarn  run  dev

```

![项目运行](../images/nuxt.png)

### 1.4 目录结构详解（app/、server/、assets/、components/ 等）

Nuxt 4 采用现代化强规范目录，所有功能按职责划分：

#### 1. app/（前端核心目录，所有页面写在这里）

-  **app.vue**：项目入口文件

-  **pages/**：自动路由页面（pages/index.vue = 首页）

-  **components/**：自动导入组件

-  **layouts/**：布局文件（导航、底部通用）

-  **assets/**：样式、图片、字体（需要编译）

-  **composables/**：全局工具函数（自动导入）

-  **plugins/**：插件注册

-  **middleware/**：路由守卫、权限控制

#### 2. server/（全栈后端目录，写接口 / 服务逻辑）

-  **api/**：接口文件（api/hello.ts → /api/hello）

-  **routes/**：服务端路由

-  **utils/**：服务端工具函数

#### 3. 其他重要目录

-  **public/**：静态资源（直接通过 / 访问）

-  **nuxt.config.ts**：框架配置文件

-  **.env** / **.env.production**：环境变量

### 1.5 启动、预览与构建命令

企业开发最常用 4 条命令，必须熟记：

```bash

yarn  run  dev  # 启动项目（开发模式）

yarn  run  preview  # 预览项目（生产模式）

yarn  run  build  # 构建项目（生产模式） 输出：.output 文件夹（上线用）

yarn  run  generate  # 生成静态站点（生产模式）

```

### 1.6 与 Nuxt 3 的关键差异（app 目录革命、性能、模块）

Nuxt 4 不是简单升级，而是**规范化、现代化、企业化重构**。

#### 1，**app/ 目录革命**

所有前端代码统一放入 app/，结构更清晰、更标准、更易维护。

#### 2，**性能全面提升**

启动更快、打包体积更小、内存占用更低、热更新更流畅。

#### 3，**模块与内置能力增强**

更多功能原生支持，减少第三方依赖。

#### 4，**自动导入更稳定**

组件、函数、API 自动导入更可靠，类型提示更快。

#### 5，**服务端（server）目录更规范**

全栈开发体验更流畅，接口编写更简单统一。

#### 6，**企业级稳定性更强**

官方长期支持，Bug 更少，适合正式项目上线。

### 本章总结

- 理解 Nuxt 4 四种渲染模式：SSR / SSG / ISR / CSR

- 完成环境配置：Node 20+ + yarn + Trae 插件

- 会用命令创建、安装、运行 Nuxt 4 项目

- 掌握 app/ 和 server/ 两大核心目录

- 熟记 dev /build/preview /generate 命令

- 了解 Nuxt 4 更规范、更强性能、更企业化