详解vue-cli项目中怎么使用mock数据

下面是详细讲解vue-cli项目中怎么使用mock数据的完整攻略：

1. 什么是Mock数据？

Mock（模拟）数据是指在应用开发中，为了测试或者展示某些特定场景，而生成的一些假数据，这些数据可以被用来代替实际的数据，来进行快速、高效的应用开发。在前后端分离的架构下，Mock数据往往是前端开发人员自己模拟生成，而不必触碰后端的真实数据。

2. 为什么使用Mock数据？

在开发应用的过程中，如果要等待后端的接口开发完成，才能进行前端的开发，那么将会造成相当大的时间浪费。而使用Mock数据，前端开发人员可以在后端接口开发的基础上，基本上独立完成本身的工作，避免依赖和影响，提高开发效率。

3. Mock数据的使用方式

在vue-cli项目中使用Mock数据，可以使用mockjs这个库配合axios来实现。下面将以一个简单的示例来说明。

3.1 安装mockjs和axios

在命令行中执行下面的命令：

npm install mockjs axios --save-dev

3.2 创建Mock数据

在项目的src目录下新建一个mock文件夹，用于存放Mock数据。在该文件夹下，新建一个example.js文件，内容如下：

import Mock from 'mockjs'

// 定义mock数据
Mock.mock(/\/api\/example/, 'get', {
  code: 200,
  message: 'success',
  data: {
    id: '@increment',
    name: '@cname'
  }
})

3.3 在vue.config.js中使用Mock数据

在vue.config.js中配置Mock数据，内容如下：

const path = require('path')

module.exports = {
  devServer: {
    before(app) {
      // 引入mock数据
      const example = require('./src/mock/example')
      // 设置mock数据的方法
      app.get('/api/example', (req, res) => {
        res.json(example)
      })
    }
  },
  configureWebpack: {
    devtool: 'source-map',
  }
}

3.4 获取Mock数据

在vue组件中使用axios来获取Mock数据，内容如下：

import axios from 'axios'

export default {
  name: 'example',
  data() {
    return {
      result: {}
    }
  },
  mounted() {
    axios.get('/api/example').then(res => {
      this.result = res.data
    })
  }
}

这样，在浏览器中访问http://localhost:8080/api/example，就可以获得从Mock数据中生成的随机数据了。

4. 另一种方式：使用json-server库

除了使用mockjs和axios之外，还可以使用json-server库来完成Mock数据的操作。下面将以一个简单的示例来说明。

4.1 安装json-server

在命令行中执行下面的命令：

npm install json-server --save-dev

4.2 创建Mock数据

在项目的根目录下新建一个db.json文件，内容如下：

{
  "example": [
    {
      "id": 1,
      "name": "张三"
    },
    {
      "id": 2,
      "name": "李四"
    }
  ]
}

4.3 在package.json中添加命令

在package.json中添加下面的命令：

{
  "scripts": {
    "mock": "json-server --watch db.json --port 3000"
  }
}

4.4 在vue组件中获取Mock数据

在vue组件的mounted()钩子中获取Mock数据，内容如下：

import axios from 'axios'

export default {
  name: 'example',
  data() {
    return {
      result: []
    }
  },
  mounted() {
    axios.get('http://localhost:3000/example').then(res => {
      this.result = res.data
    })
  }
}

这样，在浏览器中访问http://localhost:3000/example，就可以获得Mock数据了。

以上就是使用Mock数据的完整攻略，希望能对你有所帮助。