关于vue.js:vue2x使用mockjs模拟数据

当初都是前后端拆散开发，在开发过程中常常遇到后盾接口还没有写好，然而前段界面须要跑流程来测试界面交互，这时候就须要通过做一些假数据模仿整个流程，我已咱们就应用了mockjs来生成随机数据，拦挡 Ajax 申请

1、装置mockjs/axios

cnpm install mockjs --save-dev
cnpm install axios --save-dev

2、在src目录中创立mock -> index.js

3、mock -> index.js文件中定义接口，填充数据

import Mock from 'mockjs'
// 接口地址
Mock.mock('/api/login', (req, res) => {
  return {
    data: [
      {username: 'zxc', password: '123456'}
    ]
  }
})

留神：mockjs有很多办法，能够疾速创立数据，文档地址：http://mockjs.com

4、在main.js中导入mock->index.js文件

import '../src/mock'

5、在组件中应用

import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    // mockjs中定义的接口地址
    axios.get('/api/login').then(res => {
      console.log(res)
    })
  }
}

6、查看后果