掌握mock需踩准三节奏：先三行代码跑通真实请求，再用规则语法生成业务感数据，最后按模块组织并嵌入开发流。
从入门到熟练，关键不是堆时间，而是踩准三个节奏：先跑通一个请求、再让数据有业务感、最后把它嵌进开发流里不露痕迹。
第一步：三行代码跑通真实请求
别碰文档，直接动手：
- 装包：
npm install mockjs --save-dev - 建文件
src/mock/index.js，写死一条规则：Mock.mock('/api/user', 'get', { code: 200, data: { id: 1, name: '@cname', email: '@email' } }) - 在
main.js（或index.tsx）最顶部加一行：import '@/mock/index'，确保它在任何 axios/fetch 发起前执行
然后在组件里发个 axios.get('/api/user')，控制台就能看到返回的中文名和邮箱——这一步完成，你就跨过了“能不能用”的门槛。
第二步：用规则语法写出像真的数据
静态对象很快会卡住你。要让数据活起来，重点掌握两类写法：
-
数量与结构控制：
–'list|5-10': [{ id: '@id', status|1-3: 'active' }]（每次返回 5–10 条，status 字段 3/4 概率是 active）
–'id|+1': 100（自增，从 100 开始） -
@占位符填充语义字段：
– 用户相关：@cname、@csentence(8,20)、@region
– 时间类：@datetime("yyyy-MM-dd HH:mm")
– 图片/链接：@image("80x80", "#eee", "avatar")、@url("https")
记住：不是所有字段都该随机。比如订单状态，用 'status|1': ['paid', 'shipped', 'cancelled'] 比 @word 更贴近测试场景。
第三步：按项目节奏组织 Mock，而不是堆文件
别把所有接口塞进一个 index.js。学着按模块拆分：
-
mock/user.js：登录、列表、详情、权限字段 -
mock/order.js：含分页（'list|20': [...]）、异常码（'code|1': [200, 401, 500]）、模拟延迟（Mock.setup({ timeout: '300-800' })） -
mock/index.js统一导入并启用：import './user'<br>import './order'<br>Mock.setup({ timeout: '200-600' })
同时加环境守门员：if (process.env.NODE_ENV === 'development') { import('@/mock') }，避免误带到测试或生产环境。
第四步：进阶不靠背 API，靠解决真问题
熟练的标志是你开始主动规避坑：
- 发现列表滚动卡？加
Mock.setup({ timeout: '400-1200' })模拟弱网 - 字段总对不上？把 Swagger/YAPI 导出的 JSON 接口定义转成 Mock 模板，用脚本一键生成
- 逻辑太复杂？把生成规则封装成函数，再在 template 里调用，比如
genOrderItem()，保持可读性 - 用 TypeScript？定义好
interface UserRes，Mock 数据时手动标注类型，获得编辑器提示
学到这里，Mock 就不再是“临时补丁”，而是你写组件、测边界、推联调时自然伸手就用的呼吸感工具。
