项目背景#

VSports 是一个足球比分与赛事数据站：比分首页、热门赛事、比赛 / 联赛 / 球队 / 球员 / 场馆详情页，再加设置页和管理后台。页面多、数据密、还要多语言，对前端工程化要求不低。

我的前端选型：React 19 + TypeScript + Vite + react-router-dom 7，包管理用 Bun。

PWA：比分站就该能离线看#

用 vite-plugin-pwa + workbox-window 把站点做成 PWA，比赛进行中时弱网也能看上次缓存的比分，体验差距很明显。

i18n：多语言从第一天就设计好#

中文译名、界面文案全部走翻译层，而不是写死在组件里。球队联赛译名支持后台人工修正覆盖批量词典——运营改个名字，前端不用发版。

质量门禁：类型、规范、无障碍一个不少#

1
bun run typecheck   # tsc -b，全量类型检查
2
bun run lint        # Biome 检查
3
bun run smoke       # 冒烟测试
4
bun run a11y        # axe-core + puppeteer 无障碍测试
5
bun run checkall:build  # 一条龙：检查 + 构建 + 冒烟 + 无障碍

我的习惯：能进 CI 的检查，就不要靠人眼。checkall:build 跑通才算真正可发布。

路由与数据#

前端路由用 Hash（/#/football 等），根地址和未知路由统一跳转到比分首页，避免静态部署时的 404 坑。首页数据走中台分页接口（每页 150 场），状态筛选、分组、排序、分页全部由 MySQL 完成，前端只做分组展示：进行中 → 半场 → 即将开赛 → 完场 → 其他。

这是我技能栈的前端部分：React 19、TS 强类型、PWA、i18n、自动化质量门禁。下一篇聊聊 Go 中台。