Mock.js是一款支持随机生成数据的JavaScript库，而vue-cli-plugin-mockjs则是一份Vue.js项目的Mock数据插件，可以方便地在Vue.js项目中使用Mock.js。
在这篇文章中，我们将会为大家介绍vue-cli-plugin-mockjs的基本用法以及一些高级的功能。
安装vue-cli-plugin-mockjs
安装vue-cli-plugin-mockjs非常简单，只需要使用npm包管理工具就可以。
npm i vue-cli-plugin-mockjs -D
这样就完成了安装，下一步我们需要配置项目。
配置vue-cli-plugin-mockjs
在Vue.js项目中配置vue-cli-plugin-mockjs，只需在vue.config.js文件中加入下面这段配置代码。
-- -------------------- ---- -------
----- ---------- - --------------------------------
-------------- - -
----------------- -
-------- -
------------
-- ---------
--
-
-
-在mockPlugin()的括号中，我们可以输入需要的配置信息。
使用vue-cli-plugin-mockjs
完成了配置，我们就可以开始使用vue-cli-plugin-mockjs了。
基本用法
首先我们需要在mock文件夹下创建一个js文件（比如说mockData.js），然后在这个js文件中定义我们需要生成的Mock数据。
// mockData.js
module.exports = function() {
return {
name: '@cname', // 随机生成一个中文名字
age: '@integer(20, 30)', // 随机生成20~30之间的整数
email: '@EMAIL' // 随机生成一封邮件
}
}接下来我们需要在vue.config.js文件中加入一个非常关键的配置，即registerMock('{{url}}', module)。这个配置告诉vue-cli-plugin-mockjs去哪里获取Mock数据。
-- -------------------- ---- -------
----- ---------- - --------------------------------
----- ---- - ---------------
-------------- - -
----------------- -
-------- -
------------
------------ ----- ------- -
----- ------- - ---------------------
----- -------- - -------------------- --------
-------------------------
-
--
-
-
-最后，在Vue.js组件中使用ajax请求Mock数据即可。
-- -------------------- ---- -------
----------
---- -------------
-------------------
------------------
--------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
----- ---
---- ---
------ --
-
--
------- -- -
---------------------------------------- -- -
--------- - -------------
-------- - ------------
---------- - --------------
--
-
-
---------Mock数据方法
Mock.js提供了很多mock数据方法，这里只介绍了3个最基本的。
基本Mock方法
- '@integer(10, 100)': 随机生成10~100之间的整数
- '@float(0, 10)': 随机生成0~10之间的浮点数
- '@boolean()': 随机生成一个布尔值
日期Mock方法
- '@date(":yyyy.MM.dd")': 随机生成一个符合yyyy.MM.dd格式的日期
- '@datetime(":yyyy/MM/dd HH:mm:ss")': 随机生成一个符合yyyy/MM/dd HH:mm:ss格式的日期时间
常用Mock方法
- '@cname': 随机生成一个中文名字
- '@name': 随机生成一个英文名字
- '@EMAIL': 随机生成一封邮件
- '@url': 随机生成一个URL地址
高级用法
如果我们需要模拟一个常常出现的数据模型（比如说用户User），我们就需要写一个专门返回这个数据模型的Mock方法。
-- -------------------- ---- -------
-- -------
-------------- - -------- -- -
------ -
--- ------------- ------
----- ---------
--------- ----------------------- ------------
---- ------------- -----
------ --------
-
-接下来，在Mock数据的js文件中引入user.js并调用。
// mockData.js
const user = require('./user.js')
module.exports = function () {
return {
users: user()
}
}最后，在Vue.js组件中就可以愉快地使用模拟数据了。
-- -------------------- ---- -------
----------
---- -------------
----------------------------
------------------------------
-----------------------------
-------------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
------ --
-
--
------- -- -
---------------------------------------- -- -
---------- - --------------
--
-
-
---------总结
在Vue.js项目中使用Mock数据可以大大提高项目的开发效率，vue-cli-plugin-mockjs插件让使用Mock数据更加简单高效，只需要简单几步就可以集成到我们的项目中。Mock.js提供了很多可定制的Mock数据方法，如果需要模拟比较规范的数据模型，可以写一个专门返回这个数据模型的Mock方法。Mock数据的使用不仅仅可以用于测试，也可以用于进行前后端分离的开发。
示例代码：传送门
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b366ae