1.7 创建项目
阅读完本节后，你将会收获：
- 掌握文件夹命名规范，避免中文路径导致的开发问题
- 学会使用官方脚手架快速创建标准项目结构
- 理解 Next.js 项目的目录结构
新手最容易犯的错误是：拿到 AI 生成的代码，逐个文件手动创建。正确的做法是使用项目模板，让 AI 通过脚手架命令帮你创建标准项目。
准备工作
创建项目文件夹
在创建项目前，先在文件管理器中创建一个英文路径的文件夹。
重要：完整路径中每一级都不能有中文或空格。
| 错误示例 | 原因 |
|---|---|
C:/Users/张三/projects | 用户名是中文 |
C:/Users/李/my project | 文件夹名有空格 |
| 正确示例 | 说明 |
|---|---|
C:/Users/YourName/projects | 全英文，无空格 |
/Users/yourname/projects | macOS 用户目录 |
建议的文件夹结构：
my-projects/ ← 总文件夹
├── my-first-app/ ← 项目1
├── blog-app/ ← 项目2
└── store-app/ ← 项目3在文件夹中打开终端
创建好文件夹后，需要在其中打开终端来执行命令。
| 系统 | 操作 |
|---|---|
| Windows | 文件夹空白处右键 → "在终端中打开" |
| Windows 旧版 | 按住 Shift + 右键 → "在此处打开 PowerShell 窗口" |
| Mac | Finder → 服务 → 新建位于文件夹位置的终端窗口 |
| IDE | Cursor/VS Code/Trae：文件 → 打开文件夹，内置终端自动定位 |
什么是文件路径
文件路径是文件在文件系统中的位置。告诉 AI "修改 src/app/page.tsx" 时，AI 需要通过路径找到这个文件。
绝对路径：从根目录开始的完整路径
Windows: C:\Users\YourName\projects\my-app\package.json
macOS: /Users/yourname/projects/my-app/package.json相对路径：从当前目录开始的路径
./package.json # 当前目录下的 package.json
../other-project # 上一级目录的 other-project
src/app/page.tsx # 当前目录下 src/app/page.tsx命名规范
开发工具对中文路径支持不佳，容易导致各种离奇报错。
| 正确示例 | 错误示例 |
|---|---|
my-project | 我的项目、my project |
user-profile | user profile、用户资料 |
app.tsx | 应用.tsx、app 文件.tsx |
规则：
- ✅ 使用小写英文字母
- ✅ 使用连字符
-分隔单词 - ❌ 避免中文字符、空格、特殊字符
为什么不能用中文？
常见报错：ENOENT: no such file or directory、MODULE_NOT_FOUND
中文路径可能导致编码问题、路径解析错误、工具兼容性问题。
创建项目
现代框架都提供了官方脚手架，一条命令即可创建标准项目。
# 创建 Next.js 项目（my-app 是项目名，可以改）
pnpm create next-app@latest my-app
# 创建 Vite + React 项目
pnpm create vite@latest my-app -- --template react创建时会询问配置选项：
- TypeScript：推荐选择 Yes
- ESLint：推荐选择 Yes
- Tailwind CSS：根据需要选择
- src directory：推荐选择 Yes（代码放 src/ 目录，结构更清晰）
- App Router：推荐选择 Yes
不想记命令？
如果记不住命令，可以直接复制本教程中的示例命令。但命令很简单，建议记住：
pnpm create next-app@latest my-appNext.js 项目结构
创建完成后，你会看到这样的结构：
my-next-app/
├── src/
│ ├── app/ # 页面和 API
│ │ ├── page.tsx # 首页
│ │ ├── layout.tsx # 全局布局
│ │ └── api/ # API 接口
│ │
│ ├── components/ # UI 组件
│ └── lib/ # 工具函数
│
├── public/ # 静态资源（图片、字体）
├── package.json # 依赖管理
└── tsconfig.json # TypeScript 配置简单理解：
src/app/- 放页面文件和接口src/components/- 放可复用的 UI 组件src/lib/- 放工具函数public/- 放图片等静态资源
代码放哪里？
当 AI 说"创建用户列表页面"时，在 src/app/ 下创建 users/page.tsx。
当 AI 说"创建一个按钮组件"时，在 src/components/ 下创建 Button.tsx。
更便捷的方式：使用 /project-init
即将推出
本教程提供 /project-init skill，可以自动化整个项目初始化流程。
它能做什么：
- 环境检查：自动检查 Node.js 版本、pnpm 是否安装
- 智能推荐模板：根据你的需求（PRD、设计稿、功能想法）推荐合适的技术栈
- 预设模板：
- 推荐配置（纯前端）
- SaaS 全栈（含数据库、认证、支付）
- 营销网站/Landing Page
- 管理后台/Dashboard
- 轻量 SPA
- 兼容性检查：自动处理 React 版本、Tailwind v4、组件库冲突等问题
- 自动化安装：非交互式命令，一键创建项目
使用示例：
使用 /project-init 创建一个需要用户登录和数据库的 SaaS 项目
它会引导你完成环境检查、需求分析、模板选择、依赖安装、环境变量配置等全部流程。
教程正式发布后，会提供安装方法。想了解更多 Skills 内容，详见 2.3 Skills 系统。
启动项目
# 进入项目目录（my-app 改为你创建的项目名）
cd my-app
# 启动开发服务器
pnpm dev打开浏览器访问 http://localhost:3000，看到欢迎页面即创建成功。
常见问题
Q: 我应该用哪个模板？
| 项目类型 | 推荐模板 |
|---|---|
| 全栈应用 | Next.js |
| 前端 SPA | Vite + React |
| 静态站点 | Astro |
本教程使用 Next.js + TypeScript + Tailwind CSS，这是适合 AI 辅助开发的全栈方案。
Q: 已经用了中文路径怎么办？
在文件资源管理器中操作：
- 删除
node_modules文件夹 - 创建新的英文文件夹
- 把剩余文件复制到新文件夹
- 在新文件夹中运行
pnpm install
Q: 可以让 AI 逐个创建文件吗？
不推荐。让 AI 逐个创建文件容易遗漏、耗时、可能配置错误。正确做法：先用脚手架创建标准项目，再让 AI 在现有结构上修改。
核心理念
使用模板，而不是从零开始。
| 方式 | 结果 |
|---|---|
| 脚手架创建 | 标准结构、预配置、一键启动 |
| 手动创建 | 容易漏文件、配置错误、浪费时间 |
创建项目检查清单：
- [ ] 项目名不含中文和空格
- [ ] 使用官方脚手架
- [ ] 理解各文件夹的用途
- [ ] 项目能正常启动