如何在vue项目中使用mock

1. Mockjs

1. 简介

mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。其可模拟 Ajax 并返回模拟数据，使前端不用去调用后端的接口，方便测试。

2.Vue使用mock

1. Nom install mockjs

2. 代码如下

   <!-- 【main.js】 -->
   import Vue from 'vue'
   import App from './App.vue'
   import '../mock/mock'
   ​
   Vue.config.productionTip = false
   ​
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   ​
   ​
   <!--
   【mock.js
   【引入mock模块】 
   -->
   import Mock from 'mockjs';
   ​
   Mock.mock('/login', { //输出数据
       'name': '@name', //随机生成姓名
       //还可以自定义其他数据
   });
   Mock.mock('/list', { //输出数据
       'name': '@name', //随机生成姓名
       'age|10-20': 10
       //还可以自定义其他数据
   });
   ​
   ​
   <!-- 【App.vue】 -->
   <template>
       <div>
           <button @click="login">login</button>
           <button @click="list">list</button>
       </div>
       <!--App -->
   </template>
   ​
   <script>
       import axios from 'axios'
       export default {
           methods: {
               login() {
                   axios.post("/login").then(response => {
                       if (response.data) {
                           console.log(response.data)
                           alert(response.data.name)
                       }
                   })
               },
               
               list() {
                   axios.post("/list").then(response => {
                       if (response.data) {
                           console.log(response.data)
                           alert(response.data.name + ',' + response.data.age)
                       }
                   })
               }
           }
       }
   </script>
   ​
   <style>
   ​
   </style>

3. 还有一个差不多的组件 webpack-api-mocker 有兴趣的可以试试

参考：

1.https://www.cnblogs.com/l-y-h/p/11691110.html

2.代码见：https://gitee.com/ashscc/vue-ptn/tree/master