一，安装axios和mockjs

cnpm i axios -S

（注意：-S是--save的简写，也就是说，安装axios也可以用：cnpm i axios --save）

 cnpm i mockjs -D

（注意：-D是--save-dev的简写，也就是说，安装mockjs也可以用：cnpm i mockjs --save-dev）

二，在main.js中引入axios和mockjs

import axios from 'axios'
import './mock/mock.js'
 //全局注册axios
Vue.prototype.$axios = axios

注意：需要提前在src文件夹下面新建一个“mock”文件夹，再在mock文件夹里面新建一个mock.js文件

mock.js内容如下：（注意：mock.js中需要导入“mockjs”插件，一句代码就行：const Mock =require('mockjs');）

// const Mock =require('mockjs');//获取mockjs插件.这种方式也可以
import Mock from 'mockjs'

const Random =Mock.Random;
const produceData=function(opt){
    console.log('opt:',opt); //这里注意：不能用加号代替逗号，即不能写成：console.log('opt:'+opt);
    let articles=[];
    for(let i=0;i<10;i++){
        let newArticleObject={
            name:Random.cname(), //随机生成一个中文名
            email:Random.email(), //随机生成一个电子邮件
            date:Random.date()+' ' +Random.time() //随机生成日期和时间
        }
        articles.push(newArticleObject);
    }
    return{
        data:articles
    }
}
Mock.mock('/user',/post|get/i,produceData); //当post或get请求到/user路由时，mock会拦截请求并返回
// Mock.mock('/user','post',produceData); //这种方式就只能用post请求,注意post要加引号

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="(item,index) in data" :key="index" >{{item.name}},{{item.email}},{{item.date}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      data:[]
    }
  },
  mounted:function(){
    this.getAllData();
  },
  methods:{
    getAllData(){
      let _this=this;
      this.$axios.post('/user')
      .then(res=>{
        console.log("连接成功！");
        console.log("res:",res);
        _this.data=res.data.data;
      })
      .catch(err=>{
        console.log("连接错误："+err);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行结果如下：