1.7 创建项目

---

1. 为什么要学这个?

你可能会想:"我直接新建一个文件夹,自己在里面写HTML不行吗?"

这就好比你要盖一座摩天大楼。

• 手动新建:就像你在平地上,一砖一瓦地从零堆砌。你得自己去炼钢、自己去造水泥、自己去搭施工平台。99%的精力都花在了这些"脏活累活"上,还没开始盖楼(写业务),人已经累垮了。
• 使用脚手架:就像工厂直接运来了一套预制好的钢结构框架。地基已打好、水电管线已预埋、承重柱已就位。你不需要操心底层结构,直接往里填砖头(业务逻辑)就行。

关键区别:

• 手动创建:要自己配置TypeScript、Tailwind、路由、打包工具...可能花3天
• 使用脚手架:一行命令,30秒搞定所有配置

在Vibe Coding中,pnpm create next-app就是这个运送预制框架的传送带。

---

2. 核心概念

2.1 脚手架 - 预制钢结构

技术定义:脚手架(Scaffolding)是一套标准化的项目目录结构和配置文件模板。

就像建筑工地的预制钢结构。

• 作用:支撑你的代码。它规定了哪里放页面(app/)、哪里放图片(public/)、怎么编译TypeScript。
• 内容:包含package.json(项目图纸)、tsconfig.json(施工标准)、src/(房间结构)等。
• 好处:不用从零配置,直接开始写业务代码。

2.2 CLI命令 - 控制台

技术定义:CLI(Command Line Interface)是通过命令行输入指令来操作计算机的方式。

就像建筑工地的控制台。

• 作用:你通过它告诉工厂:"我要一套带TypeScript和Tailwind的钢结构",它就给你生成这一套。
• 命令格式:pnpm create next-app 项目名

graph TD
    A[你输入命令] --> B[pnpm create next-app]
    
    subgraph C[配置选项]
        D[TypeScript?]
        E[Tailwind CSS?]
        F[ESLint?]
        G[App Router?]
    end
    
    B --> C
    
    subgraph H[生成的项目]
        I[package.json]
        J[src目录]
        K[tsconfig.json]
        L[tailwind.config.js]
    end
    
    C --> H
    
    style A fill:#e1f5ff
    style B fill:#fff3e0
    style C fill:#f3e5f5
    style D fill:#e8f5e9
    style E fill:#e8f5e9
    style F fill:#e8f5e9
    style G fill:#e8f5e9
    style H fill:#e1f5ff
    style I fill:#fff3e0
    style J fill:#fff3e0
    style K fill:#fff3e0
    style L fill:#fff3e0

---

3. 怎么创建项目?

📦 第一步:准备工作目录

# 1. 找到你的工作区(如D盘)
# 2. 新建一个全英文文件夹,命名为 Code
# 3. 在 Code 文件夹内右键 -> "在终端中打开"

命名铁律:

• ✅ 全英文、小写、短横线:my-first-app
• ❌ 中文:我的项目
• ❌ 空格:my app
• ❌ 大写:MyApp

⚙️ 第二步:创建项目

# 使用pnpm创建Next.js项目
pnpm create next-app my-first-app

✨ 第三步:配置选项

系统会询问你想要什么样的"钢结构",请按Vibe标准选择:

🎯 问题	Vibe建议	理由
TypeScript?	Yes	必须的。这是现代钢筋,强度高,能防止很多错误
ESLint?	Yes	必须的。这是施工安全网,帮你检查代码错误
Tailwind CSS?	Yes	必须的。这是预制装修板,写样式超快
src/ directory?	Yes	强烈建议。把代码收纳在盒子里,别散在地上
App Router?	Yes	必须。这是Next.js 14+的核心承重结构
Import alias?	No	默认即可(@/*)

为什么都选Yes? 这些都是现代Web开发的标配。虽然会让项目稍微复杂一点,但能避免未来90%的坑。

🚀 第四步:启动项目

# 1. 进入项目目录
cd my-first-app

# 2. 启动开发服务器
pnpm dev

打开浏览器访问http://localhost:3000。

此刻,你看到的黑底白字网页,就是这套预制框架的样板间。

---

4. 避坑指南

❌ 不要这样做	✅ 应该这样做	为什么
用中文命名项目:我的项目	全英文、小写、短横线:my-first-app	脚手架脚本处理中文路径时经常崩溃
用空格分隔名字:my app	用连字符-代替空格:my-first-app	命令行会把空格当成分隔符,以为你在建两个项目
混用npm install	从一而终,只用pnpm	会导致生成package-lock.json,与pnpm冲突
在桌面或中文路径下创建项目	在全英文路径下创建,如D:\Code\	避免路径问题导致的各种奇怪错误

---

5. 真实案例

---

6. 本章小结

1. 🏗️ 脚手架是预制框架:一套标准化的目录结构和配置文件,30秒搞定所有配置
2. 🎛️ pnpm是运输队:用pnpm create next-app既快又稳
3. 📝 命名是铁律:全英文、小写、短横线(kebab-case),无中文、无空格
4. ✅ 配置选Yes:TypeScript、ESLint、Tailwind、App Router都是现代标配
5. 🚀 启动很简单:cd 项目名 → pnpm dev → 访问localhost:3000