🧩 使用 IntelliJ IDEA 创建 React 项目（附 Yarn 配置与 Vite 建议）

在现代前端开发中，React 仍然是最受欢迎的 UI 库之一。虽然很多开发者习惯使用命令行工具创建 React 应用，但 IntelliJ IDEA 也提供了图形化的新建入口，支持 create-react-app、Vite、Next.js 等方案。

本篇文章将手把手带你通过 IntelliJ IDEA 创建 React 项目，并重点讲解 Yarn 配置和 create-react-app 的注意事项。

---

📷 创建 React 项目界面详解

以下是通过 IDEA 新建 React 项目的界面（截图）：

我们逐项解释上图中的重要字段和提示内容：

---

1️⃣ Name（项目名）

• 你要创建的项目名称，例如：react、my_app 等。
• 最终项目目录将自动以此命名。

注意：项目名称要遵循npm包命名规范，使用 数字、字母、下划线 命名

---

2️⃣ Location（项目路径）

• 本地文件系统中项目的存放位置。
• 示例：D:\IdealProjects\react

---

3️⃣ Project type（项目类型）

• IDEA 提供了：
  • React: 使用 create-react-app
  • React Native: 原生应用开发
  • Next.js: SSR 框架

本文选择：React

---

4️⃣ Node interpreter（Node 解释器）

• IDEA 自动检测你的 Node 安装路径。
• 例如：D:\soft\nodejs\node.exe
• 版本号：22.15.0（请使用 Node 18 或以上）

如未识别，请点击右侧 ... 选择本地 Node 可执行文件。

---

5️⃣ create-react-app

• IDEA 内部通过 npx create-react-app 方式生成 React 项目。
• 下拉框中可选择版本（如 5.1.0）。
• 实际等价于：

npx create-react-app my-app

---

❗红色提示信息解析

Using the create-react-app is not the advised method for creating React applications. The preferred approach is to use a template with the Vite bundler when using React without a framework.

这段话的意思是：

• 官方不再推荐使用 create-react-app 创建新项目。
• 推荐使用 Vite 创建 React 应用，具有更快的启动速度、更现代的构建架构。
• 如果你不使用 Next.js 等框架，请优先考虑 Vite。

---

6️⃣ ✅ Create TypeScript project

• 可选项：是否使用 TypeScript 模板。
• 勾选后，项目会默认启用 .tsx 文件及类型系统。

---

🧶 配置 Yarn 为包管理器

虽然 IDEA 默认使用 npm，你可以切换为更高效的 Yarn。
Yarn vs npm 全面对比：谁才是最适合你的前端包管理器

✅ 安装 Yarn（全局）

npm install -g yarn

✅ 验证 Yarn 是否生效

在终端（CMD）执行：

yarn --version

如果输出版本号如 1.22.22，说明 Yarn 安装成功。

添加 Yarn 到环境变量 Path中

通过下面命令找到 Yarn 的安装路径

where yarn

应返回类似：

C:\Users\admin\AppData\Roaming\npm\yarn
C:\Users\admin\AppData\Roaming\npm\yarn.cmd

将它的目录 C:\Users\admin\AppData\Roaming\npm\ 配置在环境变量 Path 中，这样 IDEA 中就可以运行该命令了

✅ IDEA 中启用 Yarn

1. 打开 File > Settings（或 Preferences）
2. 导航到：Languages & Frameworks > Node.js and NPM
3. 配置如下：
   • Node interpreter: 正确的 Node 路径
   • Package manager: 选择 yarn 的路径（例如 yarn.cmd），可以直接粘贴路径 C:\Users\admin\AppData\Roaming\npm\yarn.cmd
     
     IDEA 控制台查看是否能够使用 yarn 命令
     

✅ 使用 Yarn 重新安装

项目默认是通过 npm 的方式去进行安装的，这也是为什么项目名称要遵循npm包命名规范的原因，项目目录目录结构如下

如果你想用 yarn 的方式去进行安装，可以把 package-lock.json 这个文件删掉，把 node_modules 也删掉，再执行 yarn 或者 yarn install，执行完之后，会生成 yarn.lock 文件。

---