这是我们的bus，说白了就是一个对象，只不过借用了vue的消息管道，大家也可以自己写个管道
制造home主页路由
在src目录下创建pages目录，这个目录我们用来存放router-vue的内容
然后我们在src/pages/下创建一个home.vue组件，用来做home的内容,写下以下内容：
<template lang="html">
<div class="mr-root">
<app-header>
<p class = "title">斗鱼TV</p>
</app-header>
<loading v-if="showLoading"></loading>
</div>
</template>
<script>
import Public from "../public"
export default {
mixins : [
Public
],
data(){
return {
showLoading : true
}
}
}
</script>
<style lang="css" scoped>
</style>
解释一下，这里使用了app-header和loading组件，由Public导入（等会写）。
mixins是一个混合物，能够自动把模组分析，加载到当前实例中。
data中 showLoading和v-if配合使用，用来关闭loading效果
如果不清楚的话可以看下思维导图
public公用模组
public是一个模组集合，我们在开发的时候可能不同页面要使用相同的组件，这时就需要public打包处理了。
在src中新建public.js,内容如下：
import AppHeader from './components/AppHeader'
import Loading from './components/Loading'
export default{
components: {
AppHeader,
Loading
}
}
上文我们导入了AppHeader和Loading模块，并设置了默认导出
好，那么我们来写两个子模组,
AppHeader
在components中新建一个文件AppHeader.vue,代码如下
<template lang="html">
<header>
<i class = "icon-reorder" @click = "showSlide"></i>
<slot></slot>
<i class = "icon-user"></i>
</header>
</template>
<script>
import bus from "../bus"
export default {
methods : {
showSlide(){
bus.$emit('showSide')
}
}
}
</script>
<style lang="css" scoped>
header {
height: 44px;
background: #333;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
padding: 0 15px;
color: #fff;
line-height: 44px;
font-size: 16px;
}
header i {
color: #999;
}
.title {
margin-left: 15px;
display: inline-block;
}
.icon-user {
float: right;
line-height: 44px;
}
</style>
定义了基本的头部，给加载更多绑定了一个事件，通过bus进行传递，由app.vue来实现
Loading组件
src/components/里面新建一个Loading.vue,代码如下：