ElementUI之首页导航+左侧菜单-＞mockjs,总线

• mockjs
• 总线

1.mockjs

什么是Mock.js

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

- 老大，接口文档还没输出，我的好多活干不下去啊！

- 后端小哥，接口写好了没，我要测试啊！

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

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

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

数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

安装mockjs：

配置mockjs

mockjs使用

//src/view/Login.vue
 
 

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }
 
//使用mockjs的模板生成随机数据
const loginInfo = {
	'code|-1-0': 0,
	'message|3-10': 'msg'
}
export default loginInfo;

2.总线

- AppMain.vue：布局容器组件
- LeftAside.vue：左侧菜单组件
- TopNav.vue：首页导航组件

根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。

- 子组件往父组件传递数据(this.$emit)：TopNav -> AppMain
- 父组件往子组件传递数据(props)：AppMain -> LeftAside

//src/components/AppMain.vue
 

//src/components/TopNav.vue
 
 

//src/components/LeftNav.vue

//src/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'
//开发环境：true && require('@/mock')
//生产环境：false && require('@/mock')
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
 
import App from './App'
import router from './router'
 
import axios from '@/api/http'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios,axios)
 
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
 
 
new Vue({
  el: '#app',
  router,
  data(){
    return{
       Bus:new Vue()
    }
  },
  router,
  components: { App },
  template: ''
})