vue中使用mock（常用方式）

「已注销」

于 2020-03-14 14:47:56 发布

阅读量1.2k

点赞数

分类专栏：经验总结文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_37628963/article/details/104823180

版权

本文介绍了在Vue项目中如何使用Mock数据，包括前期准备、安装axios和mock.js、在main.js中引入、编写mock.js文件及调用方法，提供了一个简单的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用mock（常用方式）

前言

前言

近期在学习Vue，碰到前端需要数据，自己手敲太麻烦，页面也不美观，于是想到了用mock。之前用过一次，但现在全忘了。所以在这里记录一下，以备不时之需。本文从项目建好后一步一步进行vue+mock的使用。

0. 前期准备

新建一个vue项目
2）将helloworld.vue的内容删除，便于后期调试
3）新建一个按钮控件，绑定一个点击事件

1. 安装axios和mock.js插件

使用npm方式安装

// 安装axios插件
npm install  axios --save
// 安装mockjs插件
npm install mockjs --save-dev

2. 在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from 'axios'             // 新增
Vue.prototype.$axios = axios    // 新增

3. 编写

最低0.47元/天解锁文章