在vue-cli搭建的项目中使用mock.js

mock是一个模拟数据生成器。

• 团队可根据数据模板生成模板数据

• 模拟ajax请求，生成请求数据

• 基于html模板生成模拟数据

优点：

• 团队可以并行工作（开发时，如果后端还没完成数据输出，前端可自写静态模拟数据，前后端分离，提高效率）
  
• 简单方便, 无侵入性, 基本覆盖常用的接口数据类型
  
• 可以模拟那些无法访问的资源
  
• 无需担心网速不好

第一步：用 vue-cli 搭建一个基本的 vue 项目

$ npm install --global vue-cli        //全局安装 vue-cli
$ vue init webpack-simple myVue                //创建一个基于 webpack 模板的新项目//接着一连串回车,Project 填项目名、项目描述、作者等基本信息
$ cd myVue                              //进入项目
$ npm install                         //安装依赖

第二步：安装 mockjs 

$ npm install mockjs --save-dev    //--save-dev 是指将mockjs写进package.json的"devDependencies"下    // --save-dev的缩写是 -D        --save的简写是 -S                   

在package.json的devDependencies下看到有："mockjs": "^1.0.1-beta3", 即下载成功。

然后启动项目：

$ npm run dev

第三步：新增并编写mock.js文件

项目结构如下图所示：

在src文件夹下新建mock.js文件，接着开始编写：

//引入mockjs
import Mock form 'mockjs'
//使用mockjs模拟数据Mock.mock('/api/users', (req, res) =>{ {
    return Mock.mock({
	"user|1-10": [{
            'name': '@cname',
            'id|+1': 1, 
            'age|10-60': 0,    //10-60以内的随机数，0用来确定类型 
            'birthday': '@date("yyyy-MM-dd")',    //年月日
            'city': '@city(true)'    //中国城市
        }]
    })})

第四步：在.vue文件中使用：

先在main.js中引入我们写好的mock.js：

import Mock from ./mock

然后在页面上运用：

<template>
  <div class="hello">
    <el-table :data="users" stripe style="80%" align="center">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="date" label="出生日期" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';    //vue2.x的引入axios进行前后端交互
export default {
  name: 'HelloWorld',
  data () {
    return {
      users: []
    }
  },
  mounted: function(){
    axios.get('/api/users').then(res=>{
      this.users= res.data.user;
    })
  }
}
</script>

在浏览器打开 http://localhost:8090/?#/（8090是端口号，可以在config/index.js中修改），看到如下效果：