Vue-cli项目中使用mockjs模拟数据

秒速五厘米 2022-05-10 16:56 252阅读 0赞

### vue-cli项目中如何使用 ###

*  在项目中安装mockjs、axios（http请求库）
    
        cnpm install mockjs axios --save
 *  在项目中新建一个mock.js文件，用于定义接口返回的数据
 *  在main.js引入mock.js

### **mock.js** ###

### **main.js** ###

import Mock from './mock' // 刚刚手写的mock.js文件
    import axios from 'axios' // axios http请求库
    
    axios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的url
    Vue.prototype.$http = axios

### **组件中使用** ###

this.$http.get("/posts").then(res => {
      console.log(res);
    });

console打出的数据

![70][]

注意：get请求有带参数时，请把接口url写为正则匹配，否则匹配不到就报错（Mock.mock('此处为正则'）。

[70]: /images/20220505/45a74211b76f4009954f307ea474a8bc.png

Vue-cli项目中使用mockjs模拟数据

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 MockJs使用示例

相关 Vue项目中mock模拟数据

相关 Vue使用mockjs来生成模拟数据

相关 mockJs -- vue中常用数据模拟

相关 mockjs 基础使用

相关使用VueCLI脚手架创建项目

相关 vue中用mockjs模拟webapi服务

相关 Vue-cli项目中使用mockjs模拟数据

相关 vue中使用mockjs

相关 vue中使用mockjs模拟接口