本文共 2949 字，大约阅读时间需要 9 分钟。

介绍：

前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

1. mock.js模拟响应ajax请求

   一， Mock.js使用步骤 ：
   我们在命令窗口执行npm install mockjs -D 代码，就可以下载成功了，
   可以在package.json中找到，就OK，如下图：
   
   二，我们得写专门的mock文件：
   如下图目录;
   
   login-mock.js：

   // const loginInfo = {

   // code: -1,
   // message: ‘密码错误’
   // }

   //使用mockjs的模板生成随机数据

   const loginInfo = {
   ‘code|0-1’: 0,
   ‘msg|3-10’: ‘msg’
   }
   export default loginInfo;

index.js(mock)：

import Mock from 'mockjs' //引入mockjs，npm已安装import action from '@/api/action' //引入请求地址//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时Mock.setup({	// timeout: 400  //延时400s请求到数据	timeout: 200 - 400 //延时200-400s请求到数据})//引登陆的测试数据，并添加至mockjsimport loginInfo from '@/mock/json/login-mock.js'let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')Mock.mock(s1, "post", loginInfo)// Mock.mock(s1, /post|get/i, loginInfo)

三，引入：

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置 (1)dev.env开发使用

'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {  NODE_ENV: '"development"',  MOCK: 'true'})

(2)prod.env上线不使用

'use strict'module.exports = {  NODE_ENV: '"production"',  MOCK: 'false'}(3)main.js

//开发环境下才会引入mockjs

process.env.MOCK && require(’@/mock’) 如果不是开发环境，我们就可以注释代码。

2. AppMain.vue

3. LeftNav.vue

4. TopNav.vue

5. main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import 'element-ui/lib/theme-chalk/index.css'process.env.MOCK && require('@/mock')import App from './App'import router from './router'import ElementUI from 'element-ui'import axios from '@/api/http'import VueAxios from 'vue-axios'Vue.use(ElementUI)Vue.use(VueAxios,axios)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  data(){	  return {		  Bus:new Vue({		  })	  }  },  router,  components: { App },  template: '
   '})

我们测试：效果：

当产生点击事件缩小： 退出： 退出成功： 重点难点点睛： 1.退出事件： 写退出方法即可，返回登录界面。 2，总线传值 将一个空的Vue实例放到根组件下，所有的子组件都能调用 也就是说在main.js里面写一个全局Vue组件，

new Vue({  el: '#app',  data(){	  return {		  Bus:new Vue({		  })	  }  },  router,  components: { App },  template: '
   '})

然后在两个子组件中传值，产生触发事件即可。

转载地址：https://blog.csdn.net/shaobina/article/details/100186440 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！