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