面试题：Vue中如何使用Mock.js进行简单的数据本地模拟

Question

请描述在Vue项目中引入Mock.js进行本地数据模拟的基本步骤，并给出一个模拟用户列表数据（包含姓名、年龄、性别）的简单示例代码。

Answer 1

引入Mock.js进行本地数据模拟的基本步骤

1. 安装Mock.js：在项目根目录下，通过npm或yarn安装Mock.js。
   • npm：npm install mockjs --save-dev
   • yarn：yarn add mockjs -D
2. 创建Mock数据文件：在项目src目录下创建一个mock文件夹，在该文件夹下创建一个js文件，例如userMock.js。
3. 编写Mock数据逻辑：在userMock.js文件中引入Mock.js，并编写模拟数据。
4. 在Vue项目中使用Mock数据：在项目入口文件（一般是main.js）中引入编写好的Mock数据文件。

模拟用户列表数据示例代码

// userMock.js
import Mock from 'mockjs'

const userList = Mock.mock({
  'list|5': [
    {
      'name': '@cname',
      'age|18-60': 1,
     'sex|1': ['男', '女']
    }
  ]
})

export default userList

// main.js
import Vue from 'vue'
import App from './App.vue'
import userList from './mock/userMock.js'

// 这里简单打印模拟数据，实际可根据需求在组件中使用
console.log(userList.list)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')