$ npm install mockjs
# axios 一般默認(rèn)自帶
$ npm install axios

# 根據(jù)項目環(huán)境運行對應(yīng)的啟動命令
$ npm run dev
$ npm run serve

// 導(dǎo)入 mock 數(shù)據(jù)
import '../mock/index.js'
// 或者這樣導(dǎo)入（二選一即可）
require('../mock/index.js')

// 導(dǎo)入 mockjs ($ npm install mockjs)
import Mock from 'mockjs'
// 不限制請求方式
Mock.mock('/api/login', (req) => {
  // 輸出請求參數(shù)
  console.log(req)
  // 返回數(shù)據(jù)
  return {
    // 輸出數(shù)據(jù)(隨機生成姓名)
    'name': '@name',
    // 還可以自定義其他數(shù)據(jù)
  }
})
// 限制 post
Mock.mock('/api/post', 'post', (req) => {
  // 輸出請求參數(shù)
  console.log(req)
  // 返回數(shù)據(jù)
  return {
    // 輸出數(shù)據(jù)(隨機生成姓名)
    'name': '@name',
    // 還可以自定義其他數(shù)據(jù)
  }
})
// 限制 get
Mock.mock('/api/get', 'get', (req) => {
  // 輸出請求參數(shù)
  console.log(req)
  // 返回數(shù)據(jù)
  return {
    // 輸出數(shù)據(jù)
    'age|10-20': 10
    // 還可以自定義其他數(shù)據(jù)
  }
})
// 返回數(shù)據(jù)方式，所有請求方式都支持
Mock.mock('/api/login2', {
  "code": 200,
  "data": {},
  "msg": "請求成功"
})
Mock.mock('/api/login1', require('./test.json'))
Mock.mock('/api/login3', (req) => {
  return require('./test.json')
})

// 經(jīng)過自定義處理后的 axios
// import { axios } from '@/api/axios'
// 直接使用 axios
import axios from 'axios'
// post
export function login_post (parameter) {
  return axios.post('/api/login', parameter)
}
// get
export function login_get (parameter) {
  return axios.get('/api/login', parameter)
}
// post
export function login_post_1 (parameter) {
  return axios({
    url: '/api/login1',
    method: 'post',
    data: parameter
  })
}
// get
export function login_get_1 (parameter) {
  return axios({
    url: '/api/login',
    method: 'get',
    // 在使用 mockjs 時， get 請求不能使用 params 進行傳參，會報 404
    // params: parameter
    // 要么不傳，要么先使用 post 的 data 方式先傳著用
    data: parameter
  })
}

<script>
// 從封裝的 request.js 文件中導(dǎo)出使用
import {
    login_post,
    login_post_1,
    login_get,
    login_get_1
} from '@/api/request'
// 直接使用 axios
import axios from 'axios'
export default {
  mounted () {
    // 參數(shù)
    const params = {
      id: 110
    }
    // post
    login_post(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    // post
    login_post_1(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    // get
    login_get(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    // get
    login_get_1(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    // 直接使用
    axios.post('/api/post', params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    // 直接使用
    axios.get('/api/get', params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>