MockJS快速入门

众所周知Mock.js因为两个重要的特性风靡前端:

• 数据类型丰富
  支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

• 拦截 Ajax 请求
  不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。安全又便捷

mockjs入门操作：

开发环境：WebStorm+Vue+MockJs

mockjs的配置和使用:

1. 首先安装MockJS，安装axios是为了发送AJAX请求测试模拟的接口，使用其他方式如原生AJAX请求或$.ajax都是可以的，使用其他方式发送AJAX请求无需安装axios。

npm install mockjs --save
npm install axios --save

2、使用webpack打包工具打包vue单文件。 首先安装css-loader、style-loader、vue、vue-loader、vue-template-compiler。

npm install css-loader style-loader --save-dev
npm install vue vue-loader vue-template-compiler --save-dev

3、在webpack.config.js配置文件中添加对应的loader,完整的配置图如下。

const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    entry: './webapp/App.js',
    output: {
        filename: 'App.js',
        path: path.resolve(__dirname, './dist')
    },
	module: {
		rules: [
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader']
            },
	        {
			    test: /\.vue$/,
			    use: 'vue-loader'
		    }
		]
	},
	plugins: [
		new VueLoaderPlugin()
	],
	mode: "production"
}

4、创建一个mock.js文件，接着在入口文件中(main.js)引入。

require('./mock.js');

5、在mock.js文件中引入MockJS。

import Mock from 'mockjs';

后面我们将在mock.js中编写模拟接口。

目录结构如下：

 index.html是主页文件，main.js是入口文件，mock.js是模拟接口文件，webpack.config.js是webpack配置文件，./dist/main.js是打包后的入口文件，./src/axios/api.js是封装axios请求的文件。