【Vue】Vue-cli之Mock.js 模拟数据实现及构建

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。

以下介绍了Mock使用的基础语法，小伙伴们也可直接拿来主义，配合Vscode live-server插件愉快的 进行调试啦~

<pre id="show"></pre>
<img src="" alt="" srcset="" id="imgSrc">

<script>
   var data = Mock.mock({
      'list|1-10': [{
         'id|+1': "@increment"
       }]
    })

    console.log(data.list)

    //document.getElementById("imgSrc").setAttribute("src", data.list[0].id)
    document.getElementById("show").innerHTML = JSON.stringify(data, null, 4)

那如何在Vue脚手架中使用呢？

1. 本地代理解决跨域， devServer->proxy  具体实现可百度
2. 开发环境利用devServer->after中间件、构建使用Mock自定义XHR拦截

• 中间件为真实XHR请求，控制台有Network日志，Mock为自定义XHR拦截

3. 模块封装、分块

具体流程图如下，如有错误或更好实现，欢迎评论分享

Node-Mock模拟数据实现(流程图)

1. 工程目录准备，以下实现仅供参考