前端项目创建与初始化
搭建前端项目，说白了就是选一个趁手的脚手架。你可能会问，为什么不用手动配置？我之前也这么干过，结果折腾了半天webpack配置，还没来得及写一行业务代码……从那以后，我老实了。
这节课，咱们就聊 Vue CLI 和 Create React App（CRA）。这两个工具，是目前最主流的项目初始化方案。
2.1 环境准备：先确认你装好了Node.js
不管你选哪个脚手架，Node.js 是必须的。我建议安装 LTS（长期支持）版本。
个人习惯：用 nvm（Node Version Manager） 管理 Node 版本。这样项目切换时，不容易出兼容性问题。
怎么检查？打开终端，敲下面这个命令：
node -v
npm -v如果看到版本号，说明环境已经就绪。如果没看到……嗯，先去 Node.js 官网下载安装包。
2.2 使用 Vue CLI 创建项目
Vue CLI 是 Vue.js 官方脚手架。我个人觉得，它对新手比较友好。
2.2.1 安装 Vue CLI
全局安装，只需要一条命令：
npm install -g @vue/cli
# 或者
yarn global add @vue/cli安装完成后，可以运行 vue --version 确认是否安装成功。
2.2.2 创建项目
用 vue create 命令，后面跟上项目名：
vue create frontend-app接下来，你会看到一个交互式选项界面。这里我跟你分享一下我的选择经验：
- Manually select features：选这个，可以按需勾选Router、Vuex、CSS预处理器等。
- Vue version：建议选 3.x（除非你需要兼容旧项目）。
- Babel / TypeScript：如果团队熟悉TS，选上；否则先用Babel也够。
- Linter / Formatter：我推荐 ESlint + Prettier，能提前发现很多格式问题。
如果你不想交互，可以直接用默认配置：
vue create frontend-app --default我曾经在 window 系统下遇到过权限问题。建议用管理员终端运行，或者用 npx 方式避免全局安装冲突。
2.3 使用 Create React App 创建项目
CRA 是 React 官方推荐的脚手架。它把所有构建配置都封装好了，开箱即用。
2.3.1 创建项目
运行下面命令：
npx create-react-app frontend-app用 npx 而不是全局安装，可以确保每次都用最新版本，避免版本不对导致的问题。
创建过程很快，大概一两分钟。完成后，你会看到类似这样的输出信息：
Success! Created frontend-app at /your-path/frontend-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.2.3.2 项目结构解读
CRA 初始化的项目结构很清晰，我帮你梳理一下几个关键目录：
| 目录/文件 | 作用 |
|---|---|
public/ |
静态资源，比如 favicon 和 index.html |
src/ |
源码目录，组件、样式都放这里 |
src/App.js |
根组件，你从这里开始写代码 |
package.json |
项目依赖和脚本配置 |
2.4 两个脚手架的对比
都是好工具，但适用场景不太一样。我整理了一张表格，你看了就明白：
| 特性 | Vue CLI | Create React App |
|---|---|---|
| 配置灵活度 | 可自定义插件和配置 | 默认封装，配置较少暴露 |
| 上手难度 | 中等 | 较低，几乎是零配置 |
| 内置功能 | 支持Vuex、Router、TypeScript | 仅支持React核心功能 |
| 适用项目 | 中大型、需要自定义配置的项目 | 中小型、快速原型开发 |
我个人更倾向于：如果项目后续需要定制构建流程，选 Vue CLI；如果只想快速跑起来验证想法，用 CRA 会更省事。
2.5 启动项目
创建完成后，进入项目目录，启动开发服务器：
cd frontend-app
npm run serve # Vue CLI
# 或
npm start # CRA打开浏览器，输入 http://localhost:8080（Vue CLI）或 http://localhost:3000（CRA），看到默认页面就说明环境联通了。
注意：端口可能会被占用。如果报 "port in use"，手动指定一个新端口就行了。
Vue CLI 加 --port 3001，CRA 可以设置环境变量 PORT=3001 npm start。
2.6 初始化完成后，快速检查清单
项目跑起来后，我建议你检查以下几项：
- 控制台是否有报错——看到红色的错误信息，先解决它。
- 页面能正常热更新——修改一个文件，页面是否自动刷新。
- 依赖是否安装完整——看看
node_modules目录是不是空的。
我曾经遇到一个坑：CRA 初始化时，如果 npm 版本太低，会卡在 "installing packages" 这一步。解决方案是升级 npm：npm install -g npm@latest。
2.7 本章核心流程一览
下面这张图，是我根据本节内容梳理的。你可以用它快速回顾整个流程：
看到这里，你应该已经完成了前端项目的初始化。嗯，这一步其实不难，但很关键。你的开发环境准备好了，接下来的章节，我们会让后端也跑起来，然后让它们俩“握手”联调。