创建第一个 Nuxt 项目
本教程共 50 篇 · 第 3 篇 · 更新于 2026-08-08 · 约 7 分钟阅读
本节目标：在终端里用官方脚手架生成一个 Nuxt 4 项目，理解脚手架提问的每个选项是什么意思，并认识生成出来的目录骨架。
环境配好了，现在是动手的时刻。创建 Nuxt 项目用的是官方命令行工具 nuxi（Nuxt 的 CLI）。它负责拉取模板、装依赖、生成一套能直接跑起来的工程。
3-1
打开终端，进入你想放项目的文件夹，然后执行：
npm create nuxt@latest my-nuxt-app把 my-nuxt-app 换成你喜欢的英文项目名（建议只用小写字母、数字和短横线，别用中文和空格）。如果你用的是 pnpm 或 yarn，命令是：
# pnpm
pnpm create nuxt@latest my-nuxt-app
# yarn
yarn create nuxt my-nuxt-appNote
create nuxt其实是@nuxt/create这个脚手架包的简写。加上@latest是为了确保拿到最新版本。首次运行时，npm 可能会问你要不要安装这个包，输入y回车即可。
执行后，脚手架会开始和你交互，问几个问题。下面逐个拆开讲。
3-2
不同版本脚手架的提问略有出入，但核心几项基本是这些：
1. 包管理器选哪个？ 如果你在 pnpm/yarn 环境下运行，它会列出可选项让你挑；在 npm 下运行则默认用 npm。选你常用的那个。
2. 是否初始化为 Git 仓库？
选「是」会让脚手架直接 git init，方便后续做版本管理。新手建议选是。
3. 是否安装依赖？ 选「是」会在生成模板后立刻帮你把依赖装好，省得你再手动跑一次 install。建议选是。
4. 选择开发特性 / 模板预设 新版脚手架可能让你勾选要内置的能力，比如：
- TypeScript：是否默认用 TS 写项目（强烈建议开启，Nuxt 对 TS 零配置支持，后面第 9 章细讲）。
- ESLint：代码风格检查工具，团队项目有用，个人可先不开。
- Tailwind CSS / 测试框架等：按需勾选，零基础先都不选，保持项目纯净。
Tip如果你不想被一个问题一个问题地问，可以带参数一次性生成。例如
npx nuxi init my-app是更底层的初始化命令。但新手还是走交互式更稳，能看清每一步发生了什么。
3-3
生成完成后，脚手架通常会提示你进入项目并启动。先在编辑器里打开它：
# 用 VS Code 打开（需已装 VS Code 并加入 PATH）
code my-nuxt-app
# 或者进入目录
cd my-nuxt-app打开后你会看到一堆文件和文件夹。下一章会完整讲目录结构，这里先认识最关键的两个：
nuxt.config.ts：整个项目的配置文件，所有行为开关都在这里。app/：Nuxt 4 的代码主目录，你的页面、组件都将放在里面。
3-4
进到项目目录后，启动开发服务器：
# npm
npm run dev
# pnpm
pnpm dev终端会打印出本地地址，一般是 http://localhost:3000。在浏览器打开它，如果看到 Nuxt 的欢迎页，恭喜，你的第一个 Nuxt 项目跑起来了。
WarningWindows 用户如果遇到打开慢，按上一章说的，用
http://127.0.0.1:3000代替localhost:3000。另外确保终端里的项目路径正确——要先cd进项目目录再运行dev，否则会报错找不到命令。
3-5
一个刚初始化的 Nuxt 4 项目，骨架大致如下（先有个印象，第 4 章逐项目录讲解）：
my-nuxt-app/
├── app/ # 代码主目录（Nuxt 4 新约定，srcDir）
│ ├── app.vue # 应用根组件
│ ├── components/ # 组件目录（自动导入）
│ ├── composables/ # 组合式函数（自动导入）
│ ├── pages/ # 页面目录（文件路由）
│ └── assets/ # 需构建处理的资源
├── public/ # 静态文件（Nuxt 4 中位于 app/public）
├── server/ # 服务端代码（API、中间件）
├── nuxt.config.ts # 项目配置
├── package.json # 依赖与脚本
└── tsconfig.json # TypeScript 配置（自动生成）注意最外层的 app/ 文件夹——这正是 Nuxt 4 和老版本最直观的区别。Nuxt 3 里这些子目录是平铺在根下的，Nuxt 4 把它们收进了 app/，让项目根目录更干净。
Tip看到
node_modules/目录也不要慌，那是装好的依赖，体积大但不用管。它已经在.gitignore里被忽略，不会进版本库。
3-6
create nuxt 看起来只有一行命令，其实它按顺序完成了好几件事。知道这些，出问题时你才知道去哪查：
- 拉取模板：去官方仓库下载一份最新的 Nuxt 4 项目模板。这一步需要联网，断网会直接失败。
- 问清偏好：就是上一节那几个问题（包管理器、Git、依赖、TS 等），你的回答决定模板怎么调整。
- 展开文件：把模板写到
my-nuxt-app/目录里，并按你的选择微调（比如要不要.gitignore、默认开不开 TypeScript）。 - 装依赖：如果刚才选了「安装依赖」，它会调用你的包管理器执行 install，把
package.json里列的一堆包下载到node_modules/。这一步最耗时，取决于网速。 - git init：选了初始化仓库的话，会建好
.git和初始提交。
Note依赖安装这一步如果卡住，多半是网络问题（npm 源慢），不是命令错了。可以
Ctrl+C中断，换 pnpm 或切到国内镜像源后再手动npm install。
全部跑完，终端会提示你 cd my-nuxt-app 然后 npm run dev。到这一步，一个能跑的 Nuxt 4 工程就已经在你硬盘上了。
3-7
新手最容易在这几处栽跟头，对号入座：
- 卡在「下载模板」：网络不通或代理挡住了。先确认能连上
registry.npmjs.org；公司网络可能要配置 npm 代理。 - 报错「文件名、目录名不正确」：项目名带了空格、中文或特殊符号。
my nuxt app、我的项目都不行，改成my-nuxt-app。 node版本太低：终端提示engine不兼容。回到第 2 章升级 Node 到 20+。- 装依赖超时：换网络或换包管理器，也可以先
cd进目录，之后单独慢慢装。 - 权限报错 EACCES：macOS/Linux 上可能是全局目录权限问题，别用
sudo硬来，用nvm重装 Node 更干净。
Warning如果反复失败，别在生成到一半的目录上反复跑
create nuxt——先删掉那个半成品文件夹，再重新来一次，避免残留文件互相干扰。
3-8
创建项目就是一条 create nuxt 命令，跟着脚手架把包管理器、Git、依赖、TypeScript 几个选项定好，一个能跑的 Nuxt 4 工程就生成了。下一章我们把目录结构拆开看，搞清楚每个文件夹各自负责什么。
3-8 关于模板选择的一些建议
脚手架创建项目时，不同模板之间的核心差异在于预装了多少东西。最小模板只有 Nuxt 本身和一个 Hello World 页面，适合想从零搭建、自己选技术栈的开发者。完整模板则预装了 ESLint、Prettier、Pinia 等常用工具，适合想快速进入业务开发的团队。
如果你是完全的新手，建议选择完整模板。它帮你把代码规范、状态管理等常见需求都配好了，你只需要专注写业务逻辑。等你对 Nuxt 足够熟悉之后，再尝试从最小模板开始，按自己的偏好组装各个模块，这样你会更清楚每一部分存在的意义。