Vue-cli中 使用mock.js模拟端口 异步发请求获取模拟数据，简单粗暴的方法！

安装的包有
1node.js
2vue-cli
3axios
4mockjs

在项目的目录下 shift右键打开命令行（快捷键）
输入cnpm i 以上四个包名 --save

文件有(都在src文件当中，盘它！)
main.js （入口文件）
mymock.js （自己创建的模拟数据文件）
App.vue （Vue的根组件）

废话不多说，上代码！

main.js
import Vue from 'vue'
import App from './App'

import axios from 'axios'
Vue.prototype.$http=axios //在vue的原型上挂载axios方法

import './mock/mymock'//这是自己创建的模拟数据 文件名完整写法是'./mock/mymock.js'vue设置简写了


Vue.config.productionTip = false


new Vue({
  el: '#app',
  components: { App },
  template: ''
})

mymock.js
import Mock from 'mockjs'


Mock.mock('/api','get',{
    status:200,
    message:'获取成功',
    "dataa|5":[
       {
            img: "@dataImage('300x250')"
       }
    ]
})

App.vue

就这三个文件！这张图中的代码不用看。有的是跟主题没关系的，如引入的jsonp插件。

真是图文并茂！

首先！运行你的项目，命令行输入 npm start，跑起来！ ！！

直到看见这个可爱的8081端口 默认是8080端口。

然后， 打开你的谷歌浏览器，看到这个按钮了吗？ 盘它！

这是你想要的结果吗！

老铁，双击666！！！