当前位置：首页 > news >正文

1. 使用 IntelliJ IDEA 创建 React 项目：创建 React 项目界面详解；配置 Yarn 为包管理器

news 来源：原创 2025/7/19 22:38:10

1. 使用 IntelliJ IDEA 创建 React 项目：创建 React 项目界面详解；配置 Yarn 为包管理器

🧩 使用 IntelliJ IDEA 创建 React 项目（附 Yarn 配置与 Vite 建议）
- 📷 创建 React 项目界面详解
- - 1️⃣ Name（项目名）
  - 2️⃣ Location（项目路径）
  - 3️⃣ Project type（项目类型）
  - 4️⃣ Node interpreter（Node 解释器）
  - 5️⃣ create-react-app
  - ❗红色提示信息解析
  - 6️⃣ ✅ Create TypeScript project
- 🧶 配置 Yarn 为包管理器
- - ✅ 安装 Yarn（全局）
  - ✅ 验证 Yarn 是否生效
  - 添加 Yarn 到环境变量 Path中
  - ✅ IDEA 中启用 Yarn
  - ✅ 使用 Yarn 重新安装

🧩 使用 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

打开 File > Settings（或 Preferences）
导航到：Languages & Frameworks > Node.js and NPM
配置如下：
- 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 文件。

1. 使用 IntelliJ IDEA 创建 React 项目：创建 React 项目界面详解；配置 Yarn 为包管理器

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

📷 创建 React 项目界面详解

1️⃣ Name（项目名）

2️⃣ Location（项目路径）

3️⃣ Project type（项目类型）

4️⃣ Node interpreter（Node 解释器）

5️⃣ create-react-app

❗红色提示信息解析

6️⃣ ✅ Create TypeScript project

🧶 配置 Yarn 为包管理器

✅ 安装 Yarn（全局）

✅ 验证 Yarn 是否生效

添加 Yarn 到环境变量 Path中

✅ IDEA 中启用 Yarn

✅ 使用 Yarn 重新安装

相关文章：