一、前言
在 React 开发中，我们早已告别了 create-react-app（CRA）的慢启动与冗余配置，Vite 凭借其极速的冷启动、热更新和轻量配置，成为了当前 React 项目的首选构建工具。
本文将按照完整流程，带你从零开始，用 Vite 搭建一个干净、可直接用于开发的 React 项目，全程无冗余、无踩坑，新手也能一次成功。
二、环境准备
在创建项目前，我们需要确保本地环境满足基础要求：
- Node.js 环境 ：Vite 要求 Node.js 版本 ≥ 14.18.0，推荐使用 16.x 及以上 LTS 版本（可通过
node -v查看版本） - 包管理器：npm（随 Node.js 自带）、yarn 或 pnpm 均可，本文以 npm 为例
（可选）全局安装 create-react-app（仅作兼容）
如果你的本地还保留了 CRA 工具，可以通过以下命令安装 / 校验：
bash
运行
# 全局安装 create-react-app
npm install -g create-react-app
# 检查是否安装成功
create-react-app --version注意：Vite 项目无需依赖 CRA，此步骤仅为环境兼容，非必须。
三、使用 Vite 创建 React 项目
步骤 1：打开终端，进入目标目录
在你想要创建项目的文件夹中，打开终端（Windows 可在文件夹地址栏输入 cmd 回车，Mac 直接右键「新建终端」），进入对应目录。
步骤 2：执行 Vite 项目创建命令
在终端中输入以下命令，启动 Vite 项目创建流程：
bash
运行
npm create vite@latest执行后，终端会提示确认安装 create-vite 工具，直接输入 y 回车即可。
步骤 3：按提示完成项目配置
接下来按照终端引导，完成 3 步配置：
- Project name ：输入你的项目名称（建议用英文，如
react-vite-demo，直接回车默认即可） - Select a framework ：用方向键选择 React，回车确认
- Select a variant ：选择 JavaScript（如需 TypeScript 可选择对应选项），回车确认
步骤 4：安装项目依赖
创建完成后，终端会提示你执行以下命令，依次输入：
bash
运行
# 进入项目目录
cd react-vite-demo
# 安装所有依赖（npm i 是 npm install 的简写）
npm i步骤 5：启动开发服务器
依赖安装完成后，执行启动命令：
bash
运行
npm run dev执行成功后，终端会输出本地访问地址（默认 http://localhost:5173），浏览器打开即可看到 Vite + React 的默认欢迎页面，项目创建成功！
四、去除默认样式，打造干净项目
默认的 Vite 项目包含了大量示例代码、样式和图片，我们需要清理这些冗余内容，得到一个干净的项目骨架。
步骤 1：清理 App.jsx 核心文件
打开 src/App.jsx，删除所有默认内容，只保留最基础的组件结构：
jsx
function App() {
return (
<div>
<h1>我的 Vite + React 项目</h1>
</div>
);
}
export default App;步骤 2：删除冗余默认文件
直接删除以下无用文件，避免项目冗余：
src/logo.svg（Vite 默认 logo）src/App.css（默认样式文件）src/index.css（全局默认样式文件）public/vite.svg（public 目录下的 logo）
注意：如果是 CRA 项目，还需删除
public/logo192.png、public/logo512.png等图标文件，Vite 项目无需操作。
步骤 3：删除文件引入，避免编译报错
打开 src/main.jsx（Vite 项目入口文件），删除对已删除样式文件的引用：
jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
// 删除这两行：import './index.css' / import './App.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)步骤 4：验证项目
执行 npm run dev 重启项目，浏览器打开 http://localhost:5173，此时页面只会显示我们在 App.jsx 中写的标题，无任何默认样式，一个干净的 Vite + React 项目就搭建完成了！
五、项目结构说明
清理完成后，项目核心结构如下，清晰易懂：
plaintext
react-vite-demo/
├── public/ # 静态资源目录（存放图片、字体等无需打包的资源）
├── src/ # 项目源码目录
│ ├── App.jsx # 根组件
│ └── main.jsx # 项目入口文件
├── .gitignore # Git 忽略文件配置
├── index.html # 项目入口 HTML
├── package.json # 项目依赖配置
├── vite.config.js # Vite 配置文件
└── README.md # 项目说明文档六、常用扩展（可选）
1. 安装 React 路由（react-router-dom）
如果需要单页应用路由，执行以下命令安装：
bash
运行
npm install react-router-dom安装完成后，即可在 main.jsx 中配置路由，实现页面跳转。
2. 配置代理（解决跨域）
在 vite.config.js 中添加代理配置，即可解决开发环境跨域问题：
js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://你的后端接口地址',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})七、总结
通过以上步骤，我们完成了：✅ 环境准备与校验✅ Vite + React 项目创建✅ 依赖安装与项目启动✅ 冗余内容清理，打造干净项目骨架✅ 常用扩展配置参考
相比传统 CRA，Vite 项目启动速度提升 10 倍以上，配置更简洁，完全适配现代前端开发需求，是当前 React 项目的最佳实践。
八、常见问题排查
- 终端命令报错 ：检查 Node.js 版本是否符合要求，重新执行
npm create vite@latest - 项目启动后白屏 ：检查
main.jsx中是否删除了多余的样式引入，App.jsx结构是否完整 - 端口占用 ：在
vite.config.js中配置server.port修改端口，如port: 3000