🧩 使用 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 文件。

---