Mock.js是一個基於NodeJS的用來模擬API的工具，可以方便讓前端開發人員在開發過程中用來模擬API介面，方便與後端的聯調工作，尤其方便在Vue專案中使用。

官網地址：http://mockjs.com/程式碼託管地址：https://github.com/nuysoft/Mock

二、上手使用1. 建立一個Vue專案

可使用腳手架生成，這裡為了方便直接使用HBuilderX建立了一個 element-ui 專案 。

2. 安裝依賴

npm install vue-resourcenpm install mockjs

3. 新建一個mockjs檔案，輸入程式碼：

import Mock from 'mockjs';export default Mock.mock('http://g.cn', { 'name': '@name', 'age|1-100': 100, 'color': '@color'});

這裡@稱為佔位符。

4. 其它檔案內容App.vue

<template> <div id="app"> <img src="./assets/logo.png"> <div> <el-button @click="startHacking">Start</el-button> </div> </div></template><script>  import Vue from 'vue'export default { methods: { startHacking () { Vue.http.get('http://mysite.com').then( (successData) => {console.log(successData.body);}, (fileData) => {console.log(fileData);} ) } }}</script><style>#app { font-family: Helvetica, sans-serif; text-align: center;}</style>

main.js

import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'import VueResource from 'vue-resource'require('./mock')Vue.use(ElementUI)Vue.use(VueResource)new Vue({ el: '#app', render: h => h(App)})

專案目錄如下：

四、 其它一些常用語法1. 佔位符

佔位符型別佔位符方法Basicboolean, natural, integer, float, character, string, range, date, time, datetime, nowImageimage, dataImageColorcolorTextparagraph, sentence, word, title, cparagraph, csentence, cword, ctitleNamefirst, last, name, cfirst, clast, cnameWeburl, domain, email, ip, tldAddressarea, regionHelpercapitalize, upper, lower, pick, shuffleMiscellaneousguid, id

佔位符不滿足使用的時候還可以進行擴充套件。

2. 模板

// 生成隨機長度字元Mock.mock({ "string|1-10": "★"})// 生成固定長度字元Mock.mock({ "string|3": "★★★"})// 生成1-100之間的隨機數字Mock.mock({ "number|1-100": 100})// 生成隨機小數Mock.mock({ "number|1-100.1-10": 1})// 生成隨機布林值Mock.mock({ "boolean|1": true})// 從鍵值對裡隨機取兩個值Mock.mock({ "object|2": { "310000": "上海市", "320000": "江蘇省", "330000": "浙江省", "340000": "安徽省" }})// 從數組裡隨機取一個值Mock.mock({ "array|1": [ "AMD", "CMD", "UMD" ]})

更多示例可到官網： /file/2020/09/11/20200911191239_4.jpg.html 檢視。