1、安装mockjs

npm install mockjs --save-dev

2、（1）直接在HTML文件中引入：

<script src="mock.js"></script>

（2）使用ES6的方式引入：

import Mock from 'mockjs';

引入mock.js之后，您就可以开始编写mock数据了。Mock.js提供了丰富的数据生成规则，您可以使用这些规则生成各种类型的数据。以下是一些常用的数据生成规则：
@string：生成随机的字符串；
@integer：生成随机的整数；
@float：生成随机的浮点数；
@boolean：生成随机的布尔值；
@date：生成随机的日期；
@time：生成随机的时间；
@datetime：生成随机的日期时间；
@image：生成随机的图片；
@color：生成随机的颜色；
@name：生成随机的姓名；
@email：生成随机的邮箱地址；
@url：生成随机的URL地址；
@paragraph：生成随机的段落；
@sentence：生成随机的句子；
@word：生成随机的单词。

您可以使用这些规则来生成各种类型的数据，然后将生成的数据用于模拟接口返回的数据。

例如，以下是一个使用mock.js生成随机数据的示例：

import Mock from 'mockjs';

Mock.mock('/api/user', 'get', {
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 25
  }]
});

在这个示例中，我们使用了Mock.mock()方法来模拟接口返回的数据。第一个参数指定了接口的URL地址，第二个参数指定了接口的请求方式（这里是GET请求），第三个参数是一个对象，用于指定接口返回的数据格式。在这个对象中，我们使用了list属性来模拟返回的数据，它是一个数组，其中每个元素都是一个包含id、name和age等属性的对象。其中，id属性使用了'@integer'规则，表示生成随机的整数；name属性使用了'@name'规则，表示生成随机的姓名；age属性使用了'20-30'规则，表示生成20到30之间的随机整数。

除了上面提到的常用数据类型规则外，Mock.js还提供了一些高级规则，可以用于生成更加复杂的数据结构。以下是一些常用的高级规则：
@image：用于生成随机的图片地址；
@paragraph：用于生成随机的段落；
@sentence：用于生成随机的句子；
@word：用于生成随机的单词；
@title：用于生成随机的标题；
@cname：用于生成随机的中文姓名；
@url：用于生成随机的URL地址；
@color：用于生成随机的颜色；
@date：用于生成随机的日期；
@time：用于生成随机的时间；
@datetime：用于生成随机的日期时间；
@increment：用于生成递增的数字；
@decrement：用于生成递减的数字；
@pick：用于从数组中随机选择一个元素；
@shuffle：用于将数组随机排序。

这些高级规则可以用于生成更加复杂的数据结构，例如生成包含多个属性和嵌套对象的数据。例如：

import Mock from 'mockjs';

Mock.mock('/api/user', 'get', {
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 25,
    'address': {
      'province': '@province',
      'city': '@city',
      'area': '@county'
    },
    'friends|1-5': [
      {
        'id|+1': 1,
        'name': '@name',
        'age|20-30': 25,
        'email': '@email'
      }
    ]
  }]
});

在这个示例中，我们使用了嵌套对象和数组来生成更加复杂的数据结构。其中，address属性是一个包含province、city和area属性的对象，friends属性是一个包含多个嵌套对象的数组。在friends数组中，我们使用了'1-5'规则，表示生成1到5个随机的好友数据。

Mock.js还提供了一些特殊的占位符，用于生成特定类型的数据。以下是一些常用的占位符：
@id：用于生成随机的身份证号码；
@zip：用于生成随机的邮政编码；
@ip：用于生成随机的IP地址；
@color：用于生成随机的颜色；
@guid：用于生成随机的GUID；
@increment：用于生成递增的数字；
@decrement：用于生成递减的数字。

这些占位符可以用于生成特定类型的数据，例如生成身份证号码、邮政编码、IP地址等等。例如：

import Mock from 'mockjs';

Mock.mock('/api/user', 'get', {
  'id': '@id',
  'name': '@name',
  'age|20-30': 25,
  'zip': '@zip',
  'ip': '@ip',
  'guid': '@guid'
});

在这个示例中，我们使用了@id、@zip、@ip和@guid占位符来生成身份证号码、邮政编码、IP地址和GUID。这些占位符可以用于生成各种类型的数据，方便我们进行测试和开发。

除了以上介绍的规则和占位符外，Mock.js还提供了丰富的配置选项和自定义规则，可以用于生成更加复杂的数据结构和模拟接口返回的数据。如果您对Mock.js感兴趣，可以查阅官方文档了解更多信息。

除了用于生成随机数据的规则和占位符外，Mock.js还提供了一些配置选项和自定义规则，可以用于生成更加复杂的数据结构和模拟接口返回的数据。以下是一些常用的配置选项和自定义规则：

Mock.Random：Mock.js的随机函数库，用于生成各种类型的随机数据；

Mock.setup：Mock.js的全局配置选项，用于指定Mock.js的默认行为；

Mock.mock：Mock.js的模拟接口方法，用于指定接口的URL地址、请求方式和返回数据格式；

Mock.mockjax：Mock.js的jQuery插件，用于拦截jQuery的AJAX请求，模拟接口返回的数据；

Mock.toJSONSchema：Mock.js的JSON Schema生成器，用于将Mock.js的数据格式转换为JSON Schema格式。

这些配置选项和自定义规则可以用于生成更加复杂的数据结构和模拟接口返回的数据。例如：

import Mock from 'mockjs';

// 自定义规则
Mock.Random.extend({
  fruit: function() {
    var fruits = ['apple', 'banana', 'orange'];
    return this.pick(fruits);
  }
});

Mock.mock('/api/user', 'get', {
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 25,
    'fruit': '@fruit'
  }]
});

在这个示例中，我们使用了Mock.Random.extend()方法来自定义一个生成水果名称的规则，然后在Mock.mock()方法中使用这个规则来生成模拟数据。在模拟数据中，我们使用了'@fruit'占位符来生成随机的水果名称。

除了自定义规则外，Mock.js还提供了Mock.setup()方法来指定Mock.js的默认行为。例如，您可以使用Mock.setup()方法来指定Mock.js的延迟响应时间、跨域请求支持等等。例如：

import Mock from 'mockjs';

// 设置延迟响应时间为500ms
Mock.setup({
  timeout: '500'
});

Mock.mock('/api/user', 'get', {
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 25
  }]
});

在这个示例中，我们使用了Mock.setup()方法来指定Mock.js的延迟响应时间为500ms。这意味着当我们访问模拟接口时，Mock.js会等待500ms后才返回模拟数据。这可以用来模拟网络延迟等情况，以便进行测试和开发。

Mock.js还提供了Mock.mockjax()方法，可以用于拦截jQuery的AJAX请求，模拟接口返回的数据。例如：

import Mock from 'mockjs';
import $ from 'jquery';

// 拦截jQuery的AJAX请求
Mock.mockjax($);

Mock.mock('/api/user', 'get', {
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age|20-30': 25
  }]
});

在这个示例中，我们使用了Mock.mockjax()方法来拦截jQuery的AJAX请求，并使用Mock.mock()方法来生成模拟数据。这样，当我们使用jQuery的AJAX方法访问模拟接口时，Mock.js会拦截请求并返回模拟数据，从而方便我们进行测试和开发。

最后，Mock.js还提供了Mock.toJSONSchema()方法，可以用于将Mock.js的数据格式转换为JSON Schema格式。例如：

import Mock from 'mockjs';

var schema = Mock.toJSONSchema({
  'id|+1': 1,
  'name': '@name',
  'age|20-30': 25
});

console.log(schema);

在这个示例中，我们使用了Mock.toJSONSchema()方法来将模拟数据转换为JSON Schema格式，并将转换后的结果输出到控制台。这可以用于生成符合JSON Schema规范的数据定义，从而方便我们进行数据验证和测试。

总之，Mock.js是一个非常强大的数据模拟库，可以帮助我们快速生成各种类型的随机数据和模拟接口返回的数据。它提供了丰富的规则、占位符、配置选项和自定义规则，可以满足各种不同的测试和开发需求。如果您需要进行数据模拟和接口测试，建议尝试使用Mock.js来简化开发工作。