Vue mock

npm install mockjs --save -dev开发时使用

1 src下创建文件夹mock
文件夹mock下创建banner.json 和 mockServe.js

[
  {
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
  {
    "id": "3",
    "imgUrl": "/images/banner3.jpg"
  },
  {
    "id": "4",
    "imgUrl": "/images/banner4.jpg"
  }
]

 mockServe.js
//先引入mockjs模块
import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';

//mock数据:第一个参数请求地址   第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",{code:200,data:floor});

2 main.js 引入MockServer.js
import "./src/mock/mockServe";

3 将images文件夹放在public下

4 封装ajax
API文件夹中创建mockRequest【axios实例：baseURL:'/mock'】
API文件夹下index.js export const reqGetBanner = () => mockrequests.get('/banner');

标签：Vue,jpg,js,文件夹,images,banner,mock
来源： https://www.cnblogs.com/boji/p/15929734.html