持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情juejin.cn/post/714765…
- 今天学习了mockjs的使用，给大家介绍一下。
- 首先要进行安装：
npm install mockjs --save-dev - 要查看是否安装成功，可在package.json文件中查看
使用步骤：
- 1、在src文件夹下创建一个mock文件夹
- 2、准备json数据（在mock文件夹中创建相应的JSON文件）------注意：一定要格式化以下，留有空格的话项目跑不起来。
- 3、把mock数据需要的图片放置到public文件夹中（因为public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹）。
- 4、开始mock（虚拟的数据流），通过mockjs模块实现（在该步骤创建mockServe.js文件）。该步骤也可以理解为是创建mockServe.js文件，通过mockjs插件实现模拟数据。
- 5、
mockServe.js文件在入口文件中引入（至少需要一次执行一次，才能模拟数据）。
配置参数可以像ajax一样配置，只是baseURL写成mock.js文件里设置好的。
该图片是banner.json文件里的数据，也就是模拟的服务器返回的数据，要注意，这里面涉及到了图片，要把这个图片放到public文件夹下的images文件夹里，即下面的图片：
//先引入mockjs模块（注意要首字母大写）
import Mock from "mockjs"
//把创建好的数据格式引入进来（JSON数据格式）
//要注意：这时候JSON数据格式根本没有对外暴露，但是可以引入，是因为webpack能够默认把图片和JSON格式的数据对外进行"默认暴露 export default"
import banner from "./banner.json"
import floor from "./floor.json"
//mock数据：调用Mock身上的mock方法
//第一个参数是模拟的请求路径；第二个参数是模拟服务器返回的数据
Mock.mock("/mock/banner",{code:200,data:banner})
Mock.mock("mock/floor",{code:200,data:floor})
做完上面的事情以后，要注意，这时候该文件还没有对外暴露，就无法使用并模拟数据，要在main.js文件里进行引入。即import mockServe from "@/mock/mockSreve.js"
做的总结不是很好，所以大家凑合看吧！！！有更详细的步骤我会随时更新。
