32 lines
1.8 KiB
Markdown
32 lines
1.8 KiB
Markdown
# ADR-002: 使用 Vue 3 + Vite 构建响应式前端
|
||
|
||
## Status: Accepted (2026-08-26)
|
||
|
||
## Background
|
||
|
||
「备考中枢」是响应式 Web（移动优先，碎片双峰刷题；桌面兼顾模考与复盘导出）。前端框架用户已选定 Vue3。需要移动端快、桌面端稳、带图表（数据中枢/模考分析）、且能与后端共享同一套由 zod schema 单一契约源产出的类型契约。
|
||
|
||
## Decision
|
||
|
||
采用 **Vue 3.5.x + Vite 6.x + TypeScript 5.8.x**，配 Vue Router 4 + Pinia。版本锚定：
|
||
- Vue `3.5.x`（create-vue 脚手架默认；Vapor Mode 为 3.6 RC，不启用）
|
||
- Vite `6.x`（Node ≥ 18；本机 Node 24 满足；若装 Vite 7 亦可）
|
||
- TypeScript `5.8.x`（strict + any 全禁，配合 vue-tsc）
|
||
|
||
选型理由：
|
||
1. 技术矩阵定位：Vue 3 在「快速原型/内容站」MVP 速度 5/5、生态 4/5（对照 `mvp-stack.md`）。
|
||
2. 响应式优先：Vue 响应式系统天然适合「刷题状态 / 统计卡刷新」这类高频数据驱动 UI。
|
||
3. 组合式函数（composables）契合「按资源分包、单文件 ≤ 300 行」规范，逻辑组件化。
|
||
4. 前端目录规范（前端专家包 `方案 B`）明确 `components/composables/views/stores/services/types` 分层，与项目架构一致。
|
||
5. 图标锁定一套 SVG 图标库（设计阶段选定并全局统一，不混用；API/架构文档不出现 emoji）。
|
||
|
||
## Consequences
|
||
|
||
- 正面：响应式、生态成熟、与 TS 结合良好、脚手架即含类型检查。
|
||
- 负面：Vue 3.5 尚在 Vapor Mode 前，SSR 能力弱（本项目为纯客户端 SPA，无需 SSR）。
|
||
- 权衡：不为「未来可能的多端」预置 Taro/uni-app（产品已明确不做原生 App、不做多端，不必提前押注）。
|
||
|
||
## Related ADRs
|
||
- ADR-005（monorepo 布局，前端经 `packages/shared` 共享类型）
|
||
- ADR-004（全 TS strict + zod）
|