Vue使用mock服务器开发

1. 先给个mock官网地址

npm install mockjs

2. 创建mock文件夹和mock.js,创建一个接口

import Mock from 'mockjs';

Mock.mock('http://localhost:9000/list', 'get', {
    code: 200,
    data: {
        'list|1-100': [
            {
                id: '@id',//随机id
                name: '@name',//随机名称
                nickName: '@last',//随机昵称
                phone: /^1[34578]\d{9}$/,//随机电话号码
                'age|11-99': 1,//年龄
                address: '@county(true)',//随机地址
                email: '@email',//随机邮箱
                isMale: '@boolean',//随机性别
                createTime: '@datetime',//创建时间
            }

        ]
    }
})

3. main.js引入mock

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false
import '../mock/mock'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. 安装npm install axios,创建request.js和api.js

/**
*. request.js
 * */  
import axios from "axios";

const  request = axios.create({
    baseURL: 'http://localhost:9000'
})

export default request;

/**
* api.js
 * */  
import request from "./request";

export const getList = ()=>request.get('/list')

5. 组件引入getList,并调用

<template>
  <div class="home">
    <el-table :data="tableData">
      <el-table-column prop="id"></el-table-column>
      <el-table-column prop="name"></el-table-column>
      <el-table-column prop="nickName"></el-table-column>
      <el-table-column prop="email"></el-table-column>
      <el-table-column prop="createTime"></el-table-column>
      <el-table-column prop="isMale">
        <template slot-scope="scope">
            <span>{{ scope.row.isMale ? '男' : '女' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {getList} from "../api";
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data(){
    return {
      tableData: []
    }
  },
  mounted() {
    getList().then(res=>{
      console.log(res)
      this.tableData = res.data.data.list;
    })
  }
}
</script>

页面显示