npm包vue-cli-plugin-mockjs使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm包vue-cli-plugin-mockjs使用教程

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包管理工具就可以。

--- - --------------------- --

这样就完成了安装，下一步我们需要配置项目。

配置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数据。

-- -----------
-------------- - ---------- -
  ------ -
    ----- ---------   -- ----------
    ---- ------------- -----   -- --------------
    ------ --------  -- --------
  -
-

接下来我们需要在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并调用。

-- -----------
----- ---- - --------------------

-------------- - -------- -- -
  ------ -
    ------ ------
  -
-

最后，在Vue.js组件中就可以愉快地使用模拟数据了。

----------
  ---- -------------
    ----------------------------
    ------------------------------
    -----------------------------
    -------------------------------
  ------
-----------

--------
  ------ ------- -
    ---- -- -
      ------ -
        ------ --
      -
    --
    ------- -- -
      ---------------------------------------- -- -
        ---------- - --------------
      --
    -
  -
---------

总结

在Vue.js项目中使用Mock数据可以大大提高项目的开发效率，vue-cli-plugin-mockjs插件让使用Mock数据更加简单高效，只需要简单几步就可以集成到我们的项目中。Mock.js提供了很多可定制的Mock数据方法，如果需要模拟比较规范的数据模型，可以写一个专门返回这个数据模型的Mock方法。Mock数据的使用不仅仅可以用于测试，也可以用于进行前后端分离的开发。

示例代码：传送门

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/600672693660cf7123b366ae