1. 安裝

首先安裝 mock.js，由於只用於開發環境使用，所以執行如下命令安裝：

npm install mockjs --save-dev

2. 編寫模擬資料介面

在 src目錄 下建立一個 mock目錄 ，然後在裡面建立一個 index.js 檔案，作為mock各個模組的匯出點，供 src/main.js 使用。
在 src/mock/modules 目錄下，建立 xxx.js 規則，模擬各個模組資料，供 mock 使用。
這樣按模組劃分後的目錄結構大致如下所示：

├── src
|   ├── mock
|       ├── index.js
|       └── modules  // 各個模組的mock資料
|           ├── user.js
|           ├── article.js
|           └── category.js
|
 

index.js程式碼如下：

/**
 * 定義本地測試介面，最好與正式介面一致，儘可能減少聯調階段修改的工作量
 */
// 引入mockjs
import Mock from "mockjs";
// 引入模板函式類
import user from "./modules/user";
import article from "./modules/article";
import category from "./modules/category";

const { mock } = Mock; // Mock函式

// 使用攔截規則攔截命中的請求
// mock( url, post/get, 返回的資料);
mock(/\/api\/users\/login/, "post", user.login);
mock(/\/api\/users\/profile/, "get", user.profile);
mock(/\/api\/users\/logout/, "post", user.logout);
 

user.js程式碼如下：

import { Random } from "mockjs"; // 匯出隨機函式

function login(req) {
  // req是一個請求物件，包含: url，type和body屬性
  return {
    code: 200,
    data: {
      username: Random.cname(),
      token: Random.guid(),
      message: "Login successfully."
    }
  };
}

function profile(req) {
  return {
    code: 200,
    data: {
      username: Random.cname(),
      age: Random.integer(10, 30),
      date: Random.date(),
      message: ""
    }
  };
}

function logout(req) {
  return {
    code: 200,
    data: {
      message: "Logout successfully."
    }
  };
}

export default {
  login,
  profile,
  logout
};



 

article.js和category.js程式碼省略。

3. 匯入模擬資料介面

模擬好假資料介面之後，我們還要在 main.js 中將介面匯入，這樣在專案中任意元件內都可以請求這些介面了。
main.js編輯如下：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 引入mock檔案
import "./mock"; // mock 方式，正式釋出時，註釋掉該處即可

Vue.config.productionTip = false;

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

4. 元件引用

　　最後在元件 Home.vue 中呼叫這些API，以Home.vue這個元件為例，程式碼如下：

<template>
<div class="home">
  <button @click="profile">資訊</button>&#8195;
  <button @click="logout">登出</button>
</div>
</template>

<script>
import axios from "axios";

export default {
name: "home",
components: {},
data() {
  return {
    username: "admin",
    password: "password"
  };
},
created() {
  let params = { username: this.username, password: this.password };
  axios.post("/api/users/login", params).then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  });
},
methods: {
  profile() {
    axios.get("/api/users/profile").then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  },
  logout() {
    axios.post("/api/users/logout").then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  }
}
};
</script>

5. 啟動專案

執行命令 npm run serve 啟動專案，開啟除錯視窗，觀察列印結果。

注意事項：當後端寫好真實介面以後，不要忘記註釋掉在 main.js 中引入mock檔案的那行程式碼。你也可以選擇刪掉建立的 mock目錄 和 main.js 中的那行程式碼。