Vue使用Mock

1. 引入mock.js

   cnpm install mockjs --save-dev
   

2. 在src目录下，创建mockjs目录，在目录下新建文件mock.js

   	src
   	--- mockjs
   	------ mock.js
   

3. 在mock.js中引入mockjs模块，然后配置需要拦截的接口，以及定义相应的模拟数据，代码如下：

   const Mock = require('mockjs')
   const base = 'https://dev-api-whale.codemao.cn'
   
   const Random = Mock.Random;
   
   Mock.mock(base+'/api/mock','get',{
       'name':'@name',
       'age|1-100':100,
       'color':'@color',
       'thumbnail_pic_s': Random.dataImage('300x250', 'mock的图片')
   })
   

4. 拦截配置做好后，在main.js中导入mock.js文件：

   require('./mockjs/mock.js')
   

5. 然后就可以像线上一样，正常访问接口：

   API.get('/api/mock').then((res) => {
     console.log("mock", res)
     if (res.status === 200) {
       this.theme_options = res.data.items
     }
   })
   

6. 页面启动后，控制台就会打印，如下：