Vue项目中使用mock.js的完整步骤

下面我将为你详细讲解Vue项目中使用mock.js的完整步骤：

1. 安装Mock.js和axios

在Vue项目中，安装Mock.js和axios很简单，只需要在终端执行以下命令：

npm install mockjs axios --save-dev

1. 创建mock数据

在Vue项目根目录下创建一个mock文件夹，用于存放模拟数据。在该文件夹下创建一个mock.js文件，编写模拟数据的代码，以下是一个示例：

import Mock from 'mockjs'

// 模拟数据
const data = Mock.mock({
  'list|5': [{
    'id|+1': 1,
    'title': '@ctitle(5,10)',
    'image': '@image("200x100", "#FF6600", "#FFF", "Mock.js")',
    'price|1-100': 50,
    'count|1-50': 50
  }]
})

// 输出模拟数据
console.log(data)

// 导出模拟数据
export default data

上述代码中，我们使用Mock.js来模拟一个商品列表数据，共包含5个商品数据。其中，id为从1开始依次递增的数字，title为5~10个随机中文字符，image为一张虚假图片，price为1~100以内的整数，并乘上50，count为1~50以内的整数，并乘上50。

1. 编写api接口

在src目录下创建一个api文件夹，用于存放api接口。在该文件夹下创建一个goods.js文件，编写请求模拟数据的代码，以下是一个示例：

import axios from 'axios'

const baseURL = process.env.VUE_APP_BASE_API

const service = axios.create({
  baseURL: baseURL,
  timeout: 5000,
})

export function getGoods() {
  return service({
    url: '/goods',
    method: 'get'
  })
}

上述代码中，我们使用axios来进行http请求，定义了一个基于环境变量VUE_APP_BASE_API的baseURL，getGoods函数用于向/goods路径发起get请求，返回结果为Promise对象。

1. 在main.js中引入mock.js

在main.js文件中编写以下代码来引入Mock.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Mock from './mock' // 引入Mock.js文件

Vue.prototype.$mock = Mock // 将Mock挂载到Vue.prototype上

Vue.config.productionTip = false

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

上述代码中，我们先将Mock.js文件引入，再将Mock.js挂载到Vue.prototype上，使其可以在Vue实例内全局使用。

1. 编写模拟接口

在mock文件夹下创建一个index.js文件，编写以下代码：

import Mock from 'mockjs'
import data from './mock.js'

Mock.mock('/goods', 'get', () => {
  return {
    code: 200, // 自定义请求状态码
    data: data // 模拟数据
  }
})

上述代码中，我们使用Mock.mock来模拟一个/goods接口，定义请求方式为get，返回自定义状态码200和模拟数据，该接口将返回通过模拟数据生成的假商品列表数据。

1. 运行项目

最后运行项目，在终端执行以下命令：

npm run serve

在浏览器中访问 http://localhost:8080/ ，请求/goods接口，便可以看到通过模拟数据生成的假商品列表数据。

以上就是使用Mock.js在Vue项目中模拟数据的完整步骤了。