引言
作为一名 Java 后端开发者，一直习惯用 Spring Boot、MyBatis、Redis 这套组合拳解决问题。但当你想做一个自己的项目时，发现光有后端不够------总得有个界面给人看。
这篇文章记录从前端项目创建、技术选型到依赖安装的完整过程，以及作为后端开发者在每个环节的思维转换。
一、项目创建：Vite 的脚手架体验
1.1 命令的坑
一开始想在已经创建好的空文件夹 ready-to-the-moon 里初始化项目，敲下了：
bash
npm create vite@latest my-first-react-app -- --template react结果发现这个命令会在当前目录下再新建一个 my-first-react-app 子文件夹 ，而不是在 ready-to-the-moon 里初始化。
正确的做法是：
bash
cd ready-to-the-moon
npm create vite@latest . -- --template react-ts用 . 表示当前目录。
后端类比 ：这就像你用 spring init 创建项目时，如果不指定目录，它会在当前路径下新建一个以项目名命名的文件夹。前端脚手架也是同样的逻辑。
1.2 为什么选 TypeScript
模板选了 react-ts 而不是 react。理由很直接：Java 是强类型语言，TypeScript 的接口、泛型、类型推断来说是天然优势。用 TS 写前端，接口一多也不会乱。
后端类比 ：TypeScript 的 interface 就像 Java 的 DTO，type 就像 Java 的实体类。前后端约定接口时，TS 类型就是前端侧的契约。
二、Linter 选择：Oxlint vs ESLint
创建项目时，Vite 会问你要用哪个 Linter
| 对比维度 | ESLint | Oxlint |
|---|---|---|
| 定位 | 行业标准，生态成熟 | 极速新锐，Rust 编写 |
| 速度 | 较慢，大项目数秒到数十秒 | 极快，百毫秒级 |
| 生态 | 插件和自定义规则极其丰富 | 兼容大部分 ESLint 规则，边缘插件还在追赶 |
| 适合场景 | 新手、需要大量社区资料 | 追求速度、项目规模大 |
最终选了 ESLint。理由：作为新手，遇到的报错大概率是基础问题，ESLint 有海量社区讨论和教程，随便搜一个错误信息都能找到答案。等以后熟了再切 Oxlint 体验"秒检查"的快感。
后端类比：这就像选 Maven 还是 Gradle。Maven 生态成熟、资料多，Gradle 更快更灵活。新手先用 Maven 没错。
三、依赖安装：前端的"工具箱"
项目跑起来后，装了四个核心库：
bash
npm install react-router-dom axios zustand antd每个库对应一个后端熟悉的概念：
| 前端库 | 作用 | 后端类比 |
|---|---|---|
| react-router-dom | 页面路由 | Spring MVC 的 @RequestMapping |
| axios | HTTP 请求 | RestTemplate / WebClient |
| zustand | 全局状态管理 | Session / Redis 缓存 |
| antd | UI 组件库 | 模板引擎 + 组件生成器 |
重要提醒 ：装完这些库，页面不会自动变化。它们只是"躺在工具箱里"，等你 import 进来才会用到。这就像 pom.xml 加了依赖但不写代码调用，功能不会自己出现。
四、作为后端开发者的思维转换
| 后端思维 | 前端思维 |
|---|---|
| 请求-响应同步处理 | 一切异步，用 Promise/async |
| 状态存在数据库/Redis | 状态存在内存（组件/Store） |
| 分层：Controller/Service/DAO | 分层：View/Store/API |
| 编译一次部署 | 打包成静态资源，浏览器执行 |
| 异常抛到全局 | 错误要 UI 提示，不能白屏 |
| 接口文档即契约 | TypeScript 类型即契约 |
小结
前端项目搭建本身不难，难的是思维转换。作为 Java 后端，你的工程化意识、调试能力、类型思维都是优势，缺的只是前端生态的"套路"和手感。把项目跑起来，看到页面在浏览器里渲染出来，就是最好的开始。