VUE CLI 3.0 項目引入 Mock.js

mockjs 官網：http://mockjs.com/ 

以前沒有使用過 mockjs 的同窗，請參考官網文檔，數據生成規則和方法的調用都有詳細說明。

 

1、經過npm安裝依賴包

1. 進入到項目目錄，執行指令： npm install mockjs -D

    因爲mockjs是用來模擬數據的，只有是開發環境會用到，因此生產環境是不須要mockjs的，因此安裝的時候參數用 -D

 

2. 安裝成功後，package.json文件中能夠看到相關依賴

 

2、在 src 文件夾下建立名爲 mock.js 文件，並編寫數據接口，mock.js文件中代碼以下

 定義了 登陸 和 用戶列表 兩個接口

import Mock from 'mockjs'

const Random = Mock.Random

// 登陸
Mock.mock('/api/login', 'post', (option) => {
  let { username, password } = JSON.parse(option.body)
  return (username === 'admin' && password === 'admin')
})

// 用戶數據
const userData = () => {
  let users = []
  for (let i = 0; i < 10; i++) {
    let user = {
      'id': i + 1,
      'date': Random.date('yyyy-MM-dd'),
      'name': Random.cname(),
      'address': Mock.mock('@county(true)'),
      'phone': Mock.mock(/^1[0-9]{10}$/),
      'status': Random.integer(0, 1)
    }
    users.push(user)
  }
  return users
}
Mock.mock('/api/users', userData)

 

3、 在 main.js 文件中引入咱們建立的 mock.js 文件

 

OK，到這一步mock.js引入就完成了。以後就能夠經過 axios 調用咱們編寫的接口了。