vue之mock.js模拟接口

在项目开发中后端接口如果没写好前端也不方便调试，参考了一些资料总结出前端调试可以使用mock.js模拟后台接口，当然数据是自定义的，后台接口写好后替换掉mock模拟的接口就行了。方法如下：
第一，打开cmd进入项目下载mock至项目中：

npm intsall mockjs --save-dev

第二，在src目录下建立文件夹mock，mock文件夹下建立mock.js文件，js文件代码如下：

import Mock from 'mockjs';//es6语法引入mock模块

export default Mock.mock('http://test.cn', {//输出数据

  'name': '@name',//随机生成姓名

  'age|1-10': 10

  //还可以自定义其他数据
});

第三，在vue组件中使用，比如在这样目录下：src/components/pages/goods.vue

import data from '../../mock/mock.js';

第四，请求接口方面，比如我使用的是axios请求，则：

computed:{
    created(){
      Vue.prototype.$http.get('http://test.cn')
        .then(res => {
          console.log(res.data);
          this.msg=res.data.name;
          console.log(this.msg)
        })

这样就可以在浏览器上打印出随机生成的数据啦