iwowen的博客
iwowen
记录和分享技术
  1. 首页
  2. 前端
  3. vue
  4. 正文

在vue中使用mock

2020年03月30日 141点热度 0人点赞 0条评论

通过一个简单的demo演示如何在vue项目中使用mock

使用vue-cli3开始vue项目

npm install -g @vue/cli
vue create mockdemo
cd mockdemo
npm run serve

安装及使用mock

  1. 使用npn安装mockjs
npm install mockjs --save
  1. 在项目src中创建mock文件夹,文件夹中创建index.js
import Mock from 'mockjs'
const Random = Mock.Random

Mock.mock('/data/index', 'get', {
  name: Random.name(),
  date: Random.date()
})
  1. 然后再main.js中引入
Vue.config.productionTip = false
require('./mock')

使用axios调用mock接口

首先安装axios

npm install axios --save

然后在App.vue中使用axios调用mock接口

<template>
  <div id="app">
    {{name}}
    {{date}}
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      date: '',
      name: ''
    }
  },
  mounted () {
    axios.get('/data/index').then(res => {
      console.log(res.data)
      const { name, date } = res.data
      this.date = date
      this.name = name
    })
  }
}
</script>

mock详细用法访问mock官网
demo项目git地址mockdemo

标签: mock vue
最后更新:2020年11月22日

什码

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
css盒模型 js数据类型和数据转换 使用kodexplorer可道云作为hexo静态网站的后台 如何在react项目中使用redux? js中new的过程是什么? 前端关于性能优化方面的记录
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1