Nuxt.js 简介与安装
🎯 引言
学会这篇文章，你能明白 Nuxt.js 是什么、它解决了什么问题，以及为什么 Vue3 项目想要做服务端渲染或静态生成时会优先想到它。你还会用官方脚手架创建并运行第一个 Nuxt 项目，熟悉它的目录结构和常用命令。
🧱 什么是 Nuxt.js
Nuxt.js 是基于 Vue3 的全栈开发框架，它在 Vue 的能力之上补足了路由、服务端渲染、静态生成、自动导入、部署等一整套工程化方案。
简单来说，你可以把它理解为“Vue 项目的超级加强版”：
- 文件即路由：在
pages/目录下新建.vue文件，就自动变成了一条路由。 - 自动导入：组件、组合式函数、工具方法很多都可以自动引入，不用写一堆
import。 - 渲染模式灵活：可以选择服务端渲染（SSR）、静态站点生成（SSG）或客户端渲染（CSR）。
- 部署友好：内置命令能直接生成适合 Node、静态托管、Serverless 等平台的产物。
✨ 为什么选择 Nuxt.js
| 能力 | 普通 Vue3 + Vite 项目 | Nuxt.js |
|---|---|---|
| 路由配置 | 手动写 vue-router 配置 | 文件系统自动生成 |
| 组件/工具导入 | 手动 import | 大量场景自动导入 |
| 首屏 SEO | 需要额外方案 | 内置 SSR / SSG |
| 项目约定 | 各人各写一套 | 统一目录约定，团队协作更顺畅 |
| 部署适配 | 自己处理 | 内置多种部署预设 |
🚀 安装并创建第一个 Nuxt 项目
Nuxt 官方提供 nuxi 脚手架来创建项目。当前环境使用 Node.js v22.0.0，本课程对应的 Nuxt 版本为 ^3.16.0（Nuxt 3 官方要求 Node.js >= 18.0.0）。
执行以下命令创建项目：
npx nuxi@latest init my-nuxt-app
nuxi 是 Nuxt 官方的 CLI 工具，会引导你选择包管理器、是否安装依赖等。你也可以一路按默认选项完成。进入项目并安装依赖：
cd my-nuxt-app
npm install
启动开发服务器：
npm run dev
默认会打开 http://localhost:3000/，你会看到 Nuxt 的默认欢迎页面。
📁 项目结构简介
一个最基础的 Nuxt 项目目录如下：
my-nuxt-app/
├─ .nuxt/ // 开发时自动生成的运行时目录
├─ app/
│ ├─ components/ // 自动导入的组件
│ ├─ pages/ // 文件路由页面
│ ├─ app.vue // 应用根组件
├─ public/ // 静态资源，直接部署
├─ nuxt.config.ts // Nuxt 配置文件
├─ package.json // 项目依赖与脚本
app/app.vue，而不是传统 Vue 项目的 src/main.js。pages/ 目录下的文件会自动注册为路由。🛠 常用命令
安装完成后，package.json 里已经准备好了几个常用脚本：
{
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
}
}
npm run dev：启动开发服务器，支持热更新。npm run build：构建生产版本（SSR 模式）。npm run generate：生成静态站点（SSG 模式），适合部署到静态托管。npm run preview：在本地预览生产构建结果。
🧾 小节总结
- Nuxt.js 是基于 Vue3 的全栈框架，提供路由、渲染、自动导入、部署等完整方案。
- 相比纯 Vite + Vue3，Nuxt 更适合需要 SEO、服务端能力或规范团队协作的项目。
- 使用
npx nuxi@latest init创建项目，当前环境 Node.js 为 v22.0.0，Nuxt 版本为 ^3.16.0。 - 常用命令包括
dev、build、generate、preview，分别对应开发、SSR 构建、静态生成和本地预览。
❓ 知识问答
Q1：Nuxt.js 只能用于 Vue 项目吗？
是的，Nuxt 是专为 Vue 生态设计的框架，目前主要基于 Vue3。
Q2：Nuxt 和 Vite 是什么关系？
Nuxt 3 底层使用 Vite 作为默认构建工具，所以开发体验（如热更新）和 Vite 项目很接近。
Q3：什么情况下不需要 Nuxt？
如果只是做一个很小的单页面、不需要路由和 SEO，直接用 Vite + Vue3 会更轻量。
Q4：npm run generate 和 npm run build 有什么区别？
build 输出的是支持服务端渲染的运行时产物；generate 会在构建时把所有页面渲染成静态 HTML，适合纯静态站点托管。
🧪 小练习
按照以下步骤创建你的第一个 Nuxt 项目：
- 使用
npx nuxi@latest init my-nuxt-app创建项目（Node.js 建议 v18 及以上）。 - 进入目录并执行
npm install安装依赖。 - 运行
npm run dev，确认http://localhost:3000/能正常访问。 - 打开
app/app.vue，把欢迎页标题改成你自己的名字。
<template>
<div>
<h1>请在这里修改标题</h1>
<NuxtPage />
</div>
</template>
🎉 恭喜你完成了 Nuxt.js 的入门！下一篇我们会学习 Nuxt 的目录约定和自动导入机制，让你真正体会到“约定优于配置”的便利。