注意:Mock.js 仅在前端环境中模拟数据,不会替代后端真实接口。在项目上线或与后端对接时,需要将 Mock.js 相关的代码移除或替换为真实的后端接口。
1.安装 Mock.js:
在项目的根目录下打开终端或命令行工具,执行以下命令中的一个来安装 Mock.js 包:
2.创建 Mock 数据文件:
在src文件夹下创建一个名为 mock 的文件夹,并在该文件夹中创建一个 mock-data.ts 文件。在 mock-data.ts 文件中编写用于生成随机数据的 Mock.js 代码。例如,你可以编写一个生成用户数据的示例代码:
3.全局注册 Mock 数据:
在入口文件main.ts中引入并启用 Mock 数据。加入下面的代码:
注意:在生产环境下,最好不要加载 Mock 数据,因此我们使用 process.env.NODE_ENV === 'development' 来判断是否处于开发环境。
4.使用 Mock 数据:
在组件、API 请求等,可以直接导入并使用 Mock 数据。例如在一个 HelloWorld 组件中使用上面示例中的 mockUsers 数据:
这样,在开发环境下,你的项目就会使用 Mock 数据生成随机的用户列表来展示。