从零搭建 React + Vite 开发环境：命令与最佳实践

在现代前端开发中，React 结合 Vite 已成为高效开发的优选组合。本文将详细介绍如何使用 Node.js 快速初始化 React + Vite 项目，并推荐常用的组件库与工具链，附完整命令与实用技巧。

一、环境准备：Node.js 安装检查

Vite 依赖 Node.js 运行环境，推荐版本 v16.0.0+（确保支持 ES 模块）。

# 检查 Node.js 版本（需 ≥16.0.0）
node -v

# 检查 npm 版本（Node.js 自带）
npm -v

# 可选：安装/升级 pnpm（推荐，速度更快）
npm install -g pnpm

若版本不符，可通过 Node.js 官网下载最新 LTS 版本，或使用 nvm 管理多版本。

二、创建 React + Vite 项目（3 步完成）

1. 初始化项目

使用 Vite 官方脚手架创建项目，支持交互式配置：

# 使用 npm
npm create vite@latest my-react-app -- --template react

# 使用 yarn
yarn create vite my-react-app --template react

# 使用 pnpm（推荐）
pnpm create vite my-react-app -- --template react

my-react-app 为项目名称，可自定义（建议小写+连字符，如 admin-dashboard）
--template react 直接指定 React 模板，跳过交互选择

2. 进入项目并安装依赖

# 进入项目目录
cd my-react-app

# 安装依赖（根据创建时选择的包管理器）
npm install   # 或 yarn / pnpm install

3. 启动开发服务器

npm run dev   # 或 yarn dev / pnpm dev

启动成功后，终端会显示本地访问地址（默认 http://127.0.0.1:5173），打开后可见 Vite + React 初始页面。

三、核心依赖推荐（按需安装）

根据项目需求选择以下依赖，避免过度引入导致打包体积增大。

1. UI 组件库（提升开发效率）

组件库	安装命令	适用场景
Ant Design	`bash npm install antd`	企业级后台、管理系统（组件全面，设计规范）
Material UI	`bash npm install @mui/material @emotion/react @emotion/styled # 图标库（可选） npm install @mui/icons-material`	遵循 Material Design 设计语言的产品
Chakra UI	`bash npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion`	注重可访问性、支持响应式设计的项目
Element React	`bash npm install element-react element-theme-default`	追求简洁风格的后台系统

小贴士：Ant Design 和 Material UI 生态最完善，社区问题解决方案丰富，新手优先推荐。

2. 路由管理（必装）

React 官方推荐的路由解决方案：

# 安装 React Router v6+（最新稳定版）
npm install react-router-dom

核心功能：页面跳转、参数传递、嵌套路由、路由守卫等。

3. 状态管理（根据项目规模选择）

小型项目/组件内状态：无需额外库，使用 useState + useContext 即可
中大型项目：

# 方案1：Redux Toolkit（Redux 官方简化版，推荐）
npm install @reduxjs/toolkit react-redux

# 方案2：Zustand（轻量无样板，适合中小型项目）
npm install zustand

# 方案3：MobX（响应式编程，适合复杂业务逻辑）
npm install mobx mobx-react-lite

4. 网络请求（必装）

处理 API 交互的首选工具：

# 安装 Axios（支持拦截器、取消请求、JSON 自动转换）
npm install axios

建议封装成请求工具类，统一处理请求头、错误拦截等：

// src/utils/request.js
import axios from 'axios';
const request = axios.create({ baseURL: '/api' });
// 添加请求/响应拦截器...
export default request;

5. 表单处理（提升开发体验）

解决表单验证、值同步等痛点：

# 方案1：React Hook Form（性能优先，基于非受控组件）
npm install react-hook-form

# 方案2：Formik + Yup（完整解决方案，带验证）
npm install formik yup

四、项目配置优化（vite.config.js）

Vite 配置文件位于项目根目录，可根据需求自定义：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // 自定义端口（默认 5173）
    open: true, // 自动打开浏览器
    proxy: {    // 解决跨域问题
      '/api': {
        target: 'http://localhost:8080', // 后端接口地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist', // 打包输出目录
    sourcemap: false // 生产环境不生成 sourcemap
  }
})

五、项目结构建议

初始化后的项目结构可按以下方式扩展，保持代码整洁：

my-react-app/
├── public/              # 静态资源（favicon、图片等）
├── src/
│   ├── assets/          # 样式、图片等资源（会被打包处理）
│   ├── components/      # 通用组件（Button、Card 等）
│   ├── pages/           # 页面组件（Home、About 等）
│   ├── router/          # 路由配置（routes.jsx）
│   ├── store/           # 状态管理（Redux/Zustand 等）
│   ├── utils/           # 工具函数（request.js、format.js 等）
│   ├── App.jsx          # 根组件
│   └── main.jsx         # 入口文件
├── .gitignore           # 忽略 Git 提交的文件
├── package.json         # 项目依赖与脚本
└── vite.config.js       # Vite 配置

六、常用脚本命令

命令	作用
`npm run dev`	启动开发服务器（热更新）
`npm run build`	生产环境打包（输出到 dist 目录）
`npm run preview`	预览打包后的效果（本地服务器）

通过以上步骤，你可以快速搭建一个规范、高效的 React + Vite 开发环境。根据项目需求逐步引入依赖，避免过早优化或过度引入。开发过程中可参考 Vite 官方文档和 React 文档获取更多最佳实践。