在前端开发中往往会有前端需要调后台接口获取数据而后台接口未开发完成的情况，这个时候模拟ajax获取数据就很重要了。

首先，我们使用vue-cli，用vue手脚架生成前端项目

npm install -g vue-cli

vue init webpack projectname

看下生成的工程目录结构：

然后执行以下命令安装

npm install axios --save

npm install express-kv-api --save-dev

扩展：

    --save安装的插件，被写入到dependencies 对象里去（需发布到生产环境的）

    --save-dev安装的插件，被写到devDependencies对象里去（只用于开发环境，不用于生产环境）

在main.js中引入axios

// main.js

import axios from 'axios'

...

window.axios = axios
axios.defaults.timeout = 5000

在build目录中webpack.dev.conf.js添加：

// webpack.dev.conf.js

const testApi = require('express-kv-api')

...

//在devServer中添加
after (app) {
  app.all('*', testApi({
    dataDeal (data) {
      return {
        result: data,
        success: true
      }
    }
  }))
}

在项目中添加目录server，在server目录中添加test.js，用于放测试接口数据

// test.js

module.exports = {
  '/api/test/getData' () {
    return {
      'value': '666!!!'
    }
  }
}

在.eslintrc.js中添加代码检查规则：

// .eslintrc.js

globals: {
  axios: false
}

最后在App.vue中：

<template>
  <div id="app">
    <p class="testData">
      {{ testData }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      testData: '111'   //初始数据为111
    }
  },
  mounted () {
    let self = this
    axios.get('/api/test/getData')
      .then((response) => {
        self.testData = response.data.result.value
      })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最后我们通过运行

npm run dev

启动server。

我们来看看页面上显示的信息

再来看看network中接口返回信息

成功了！这样子开发起来就很方便~

贴上代码地址：demo点这里~

刚开始用vue和webpack，以上部分代码的原理我还没完全弄懂，项目中经常会用到，先记录下来，以后慢慢理解。

以上有理解错误的地方请大家帮我指出~~~感激不尽