vue-cli项目中使用mockjs详解

在我们的生产实际中，后端的接口往往是较晚才会出来，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。于是今天我们来介绍一款非常强大的插件Mock.js ，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作，在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。

搭建一个vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack vue-mock
$ cd my-project
# 安装依赖
$ npm install

安装mockjs

npm install mockjs --save-dev

开启项目

npm run dev

创建一个mockjs文件夹以及mockjs,并且在main.js引入这个文件

此时可以看到像这样的一个项目结构

mockjs的使用

在项目中的mock.js文件中，写入模拟的数据，此时我们可以参照一下mockjs的文档。

接下来可以做我们想要做的事了

在mock.js中模拟简单的一些数据

在vue中请求

效果预览

再做一个删除的处理

模拟数据

vue中使用

效果预览

相关推荐：

vue、vuecli、webpack中使用mockjs模拟后端数据

PHP实现的简单mock json脚本分享，phpmockjson脚本_PHP教程

使用 mock.js 让前端开发与后端独立

以上就是vue-cli项目中使用mockjs详解的详细内容，更多请关注Gxl网其它相关文章！