第一種簡單使用

①新建一個json文件

{
    "student":[
        {"name":"111","age":"1"},
        {"name":"222","age":"2"},
        {"name":"333","age":"3"}
    ],
    "class":[
        {"classname":"111","number":"10"},
        {"classname":"222","number":"20"},
        {"classname":"333","number":"30"}
    ]
}

②在vue.config.js中

const express = require('express')
const app = express()
const appData = require('./src/mock/test.json');
const student = appData.student;
const class_student = appData.class;

module.exports = {
    devServer: {
        before(app){
          app.get('/api/student',function (req,res) {
            res.json({
              errno:0,
              data:student
            })
          });
          app.get('/api/goods', function(req, res) {
            res.json({
              errno: 0,
              data: class_student
            })
          });
        }
    }
}

③直接在頁面中使用

axios.get('http://localhost:8080/api/student').then(response =>{
      console.log(response.data)
    },response =>{
      console.error("error")
    })

第二種規(guī)范使用

①新建js文件模擬數(shù)據(jù)

import Mock from 'mockjs'
export default{
    getName: ()=>({
        code:1,
        data:{
            name:"Tom",
            age:"12",
            sex:"man"
        }
    })
}

②定義mock的方法

import Mock from 'mockjs'
import decision from './decision'
//             前臺接口方法路徑           訪問方式     模擬數(shù)據(jù)的方法
Mock.mock('/decision/getName','get',decision.getName);

// 生成隨機數(shù)據(jù)
Mock.mock('/api/data','get',()=>{ return Mock.mock({name:'@cname',city:'@city(true)'})});

③在main.js中引入定義

import './mock/index'

這里就完成了一半搔体，接下來定義前臺請求方法就能夠請求到mock里的模擬數(shù)據(jù)

④在api中定義前臺請求方法

import request from 'axios'

export function getName(){
    return request({
        url:'/decision/getName',
        method:'get'
    })
}

⑤在頁面中使用

import { getName } from '../api/api.js'

export default class HelloWorld extends Vue {
 mounted(){
    getName().then(response =>{
      console.log(response)
    })
}

mock隨機生成的官網(wǎng)例子
http://mockjs.com/examples.html