前端开发流程
记录一下dailyuse 的前端开发流程
#type / howto
#status / evergreen
#tech / dev / frontend
前端开发流程
高质量的前端工程流程。
确认风格
寻早灵感
- Dribbble / Behance
- Mobbin
原子组件开发 (Storybook) 🎨
不要一开始就写页面！ 先写组件。
- 工具：storybook。
- 做法：在 Storybook 里开发
Button,Input,UserProfileCard等组件。 - 优势：这时候你完全不需要数据，只关心 UI 长得对不对，交互顺不顺。这是实现 UI/UX 完美还原 的最佳时机。
页面组装与 Mock 对接 🧩
- 做法：把组件拼成页面（Page）。
- 数据：引入 MSW。在页面加载时（
onMounted），发起请求。 - 状态：此时你会发现需要状态管理（Pinia），开始设计 Store 的结构。
数据层隔离 (Repository Pattern / SDK) 🛡️
不要在 Vue 组件里直接写 axios.get。封装一层 SDK。
- 做法：在前端创建一个
api文件夹。 - 代码：
// api/auth.ts
import { LoginRequest, LoginResponse } from '@dailyuse/contracts'; // 复用类型
export const authApi = {
login: (data: LoginRequest) => http.post<LoginResponse>('/auth/login', data)
};服务端状态管理 (TanStack Query) ⚡
这是区分新手和高手的关键。 不要手动在 try...catch 里写 isLoading = true。使用 TanStack Query (Vue Query)。
- 它自动处理缓存、重试、防抖、SWR（Stale-While-Revalidate）。
- 体验极佳：用户切回窗口时自动刷新数据，断网自动重试。
真实联调 (Integration) 🚀
- 动作：当后端
DailyUse对应的接口写好后，关闭前端的 MSW 开关。 - 验证：如果前几步做得好，这一步应该是**“一次过”**的。因为前后端都严格遵守了
@dailyuse/contracts。