vue项目使用mockjs

MockJS是什么？它是一个前端开发中用来模拟数据的工具。就是用于生成模拟数据的中间件，用于前端开发时与后端分离的数据模拟。这个工具模拟的数据可以是RESTful API、JSON API、GraphQL等接口的数据模拟，在Vue项目中使用MockJS可以帮助开发者快速的进行开发测试，也可以便于我们在离线情况下进行前端开发。

首先，我们需要安装MockJS，在Vue项目中使用MockJS需要先安装 mockjs 插件。我们可以在命令行终端输入npm install mockjs -D ，即可将mockjs依赖添加到项目中

npm install mockjs -D

接下来，我们需要在使用Vue的vue.config.js文件进行配置，注册配置在Vue中通过一个对webpack插件的配置来实现。我们需要使用 devServer.before 方法进行配置，这样在启动开发服务器的时候会自动执行该函数，然后我们可以在这个函数里面对代理的Ajax请求进行拦截，以达到Mock数据的目的。

module.exports = {
  devServer: {
    before(app) {
      app.get('/api/posts',(req,res) => {
        res.json(Mock.mock({
          ‘id|+1’: 1,title: '@ctitle(5,10)',content: '@cparagraph(2,5)',created_at: '@datetime',}));
      });
    }
  }
}

上面的配置中，在devServer.before 方法中我们模拟了一个请求 /api/posts，对其进行拦截，并返回Mock数据供开发人员测试。我们可以在开发时对这段代码进行修改，以便模拟测试更多的数据场景。

最后，在Vue的组件中进行使用，我们引入axios AJAX库，然后在 Vue 的代码中进行发送 AJAX 请求，就可以得到我们在 webpack 配置中预设好的 Mock 数据。

import axios from 'axios'
axios.get('/api/posts').then(response => console.log(response));

这样，我们就完成了Vue项目中MockJS的使用。通过MockJS，可以对于接口完成的功能进行调试、测试，为后续的联调与调试提供了一些数据支持，MockJS让我们在前端开发过程中可以更加的便利、流畅。