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

本文链接：https://blog.csdn.net/zhangyubababa/article/details/104559182

安装的包有
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: '<App/>'
})

mymock.js
import Mock from 'mockjs'


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

App.vue
<template>
  <div id="app">
    <button @click="setNewsApi">获取</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
      setNewsApi() {
        this.$http.get("/api").then(res => {
          console.log(res.data);
  
        });
      }
    }
}
</script>

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