引言
作为一名 Java 后端开发者,一直习惯用 Spring Boot、MyBatis、Redis 这套组合拳解决问题。但当你想做一个自己的项目时,发现光有后端不够——总得有个界面给人看。
这篇文章记录从前端项目创建、技术选型到依赖安装的完整过程,以及作为后端开发者在每个环节的思维转换。
一、项目创建:Vite 的脚手架体验
1.1 命令的坑
一开始想在已经创建好的空文件夹ready-to-the-moon里初始化项目,敲下了:
npmcreate vite@latest my-first-react-app ----templatereact结果发现这个命令会在当前目录下再新建一个my-first-react-app子文件夹,而不是在ready-to-the-moon里初始化。
正确的做法是:
cdready-to-the-moonnpmcreate vite@latest.----templatereact-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 没错。
三、依赖安装:前端的“工具箱”
项目跑起来后,装了四个核心库:
npminstallreact-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 后端,你的工程化意识、调试能力、类型思维都是优势,缺的只是前端生态的“套路”和手感。把项目跑起来,看到页面在浏览器里渲染出来,就是最好的开始。