使用 Vite 快速构建一个 React 项目，实际上并不复杂。很多开发者习惯从零配置 Webpack、Babel、ESLint 以及目录结构，耗费大量时间却迟迟未进入业务代码编写。其实，换个思路：先用 Vite 打好基础框架，再逐步集成 TypeScript 和代码规范工具，整个开发流程会变得更加高效和清晰。

初始化基础项目结构

不要急于使用脚手架一键生成。在终端执行 npm init -y 创建 package.json，然后手动建立 src 目录，并在其中划分为 components、pages、hooks、utils、assets、types 等子目录。

建议采用手动创建的方式——脚手架自动生成的结构往往嵌套过深或命名风格不统一，在团队协作时容易导致路径引用混乱。在 src 下同时创建两个文件：index.tsx 仅负责 ReactDOM.createRoot 渲染逻辑，App.tsx 作为根组件占位，后续再填充具体业务内容。

配置 TypeScript 类型支持

类型系统是 React 项目不可或缺的部分。执行 npm install --save-dev typescript @types/react @types/react-dom，安装完成后使用 npx tsc --init 生成 tsconfig.json。

进入配置文件后，务必开启 "jsx": "react-jsx" 和 "strict": true 两个选项。需要注意，如果缺少 jsx 配置，JSX 语法会直接报错导致编译失败。接着补充 "baseUrl": "src" 和 "paths": { "@/*": ["*"] }，为后续使用绝对路径导入做好准备。

集成 ESLint + Prettier 规范检查

代码规范方面有两种常用方案。第一种是直接安装全部依赖：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

第二种是手动创建 .eslintrc.cjs 配置文件，导出一个对象，将 parser 设置为 @typescript-eslint/parser，extends 中依次添加 plugin:react/recommended、plugin:react-hooks/recommended，最后必须以 prettier 结尾。这个顺序不能颠倒，否则规则覆盖会出现问题。

再新建一个 .prettierrc 文件，写入 {"semi": false,"singleQuote": true,"tabWidth": 2} 即可，无需额外安装桥接插件。

添加 Vite 构建与开发服务

这是最核心的一步。首先，如果项目中之前使用了 Webpack 相关依赖，请彻底卸载，避免端口冲突或 HMR 失效。

接着执行 npm create vite@latest my-react-app -- --template react，创建时选择 TypeScript 版本。新项目生成后，将前面手工搭建的 src 目录、tsconfig.json、.eslintrc.cjs、.prettierrc 等文件全部复制进去，覆盖默认内容。

接下来的关键操作是：打开新项目中的 vite.config.ts，添加 resolve: { alias: { '@': path.resolve(__dirname, 'src') } }。配置完成后，代码中可以直接使用 import Button from '@/components/Button' 这样的绝对路径，项目路径管理将更加清晰。

最后执行 npm install && npm run dev，在浏览器中访问 http://localhost:5173，页面应为空白但控制台无任何报错。达到这个状态，一个结构清晰、开箱即用的 React 项目模板就搭建完成了，后续可以安心填充业务代码。