Vue-cli3.0 + axios + mockjs 实战入门初体验

实战项目开发中，我们经常采用前后端分离的开发模式，那么在没有后端接口时，我们是否可以独立于后端进行开发呢？答案是肯定的。mock便可以给我们提供这样的体验，模拟了各种开发场景，提供了丰富的数据类型，支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色，让你如行云流水般舒适的摆脱后端进行开发。用法也是相当的简单，下面我们就在vue框架中体验一把mock的用法吧，飞一般的感觉，如梦初醒～

1. 下载node安装包并安装：点击下载
2. 安装vue脚手架：

npm install -g @vue/cli

   3.使用vue-cli脚手架创建项目

vue ui

4.安装依赖：mockjs

5.在项目根目录中找到src目录，并在该目录下创建mock文件夹，同时在mock文件夹中创建mock.js文件，结构如图：

6.打开mock.js文件，写入如下代码并保存：

// 引入mockjs
import Mock from 'mockjs'
// 使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {
  return {
    data: [
      {
        id: 1,
        username: 'aaa',
        password: 'aaa'
      },
      {
        id: 2,
        username: 'bbb',
        password: 'bbb'
      },
      {
        id: 3,
        username: 'ccc',
        password: 'ccc'
      }
    ]
  }
})

7.打开main.js引入mock.js文件，代码如下：

require('./mock/mock')

8.安装axios依赖

9.打开main.js文件并引入axios，添加代码如下：

import axios from 'axios'
Vue.prototype.$axios = axios

10.打开src/components中的HelloWord.vue组件，写入代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item,key) in data" :key="key">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: []
    }
  },
  mounted: function() {
    this.$axios.get("/api/data").then(res => {
      this.data = res.data
      console.log(this.data)
    })
  }
}
</script>

11.通过脚手架启动项目，便可看到如下效果：

import axios from 'axios'

使用Vue-cli3.0 + axios+mockjs模拟后端请求就是这么简单，是不是很有成就感呢？Mockjs，so easy～Vue.prototype.$axios = axios

import axios from 'axios'

Vue.prototype.$axios = axios

import axios from 'axios'

Vue.prototype.$axios = axios