快速入手

第 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 及以上版本）

• 下载地址：nodejs.org/

• 检查版本命令：

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

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

2，安装 yarn（可选）

• 下载地址：yarnpkg.com/

• 检查版本命令：

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

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

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

• 下载地址：www.trae.cn/

安装插件

• Vue - Official（官方必装）

• Nuxt.js

• ESLint

• Prettier

• Tailwind CSS IntelliSense

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

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

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

npx  nuxi@latest  init  my-nuxt4-app

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

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

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

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

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

创建流程：

• 1，选择项目模板：minimal

• 2，选择包管理器：yarn

• 3，初始化 Git：no

• 4，是否安装模块:no

等待模板自动下载完成

cd  my-nuxt4-app

yarn  run  dev

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 条命令，必须熟记：

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 更规范、更强性能、更企业化