Vhr项目分析（一） 前端Home.vue

vhr项目地址： https://github.com/lenve/vhr
项目作者： https://blog.csdn.net/u012702547

（一）element-ui简析

   该前端文件中使用的element-ui组件如下：

1. el-container: 外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
2. el-header: 顶层栏目的容器（页面顶层）。
3. el-aside: 侧边栏目（可以用作侧面菜单）。
4. el-main: 主要区域的容器。
5. el-badge: 对组件进行标记,is-dot使boolean类型，表示是否有小红点。
6. el-dropdown和el-dropdown-menu: 在el-dropdown-menu中通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。
7. el-dropdown-item: 的元素command功能是点击菜单项触发的事件回调。
8. index： 为每一项的唯一标记。要绑定路由的path。
9. default-active： 设为当前路由（this.$route.path）,这样在路由变化的时候，对应的menu-item才会高亮。
10. router： 加上这个之后每一项会根据其index进行路由跳转（vue-router模式）。
11. template： 作用是模板占位符，帮助我们包裹元素。但是循环过程中template不会被渲染到页面上。
12. el-breadcrumb: separator-class为图标分隔符class。to表示路由跳转对象，同vue-router的to。replace属性意义为跳转，不计入history。
13. keepAlive: 将切换出去的组件缓存下来。

（二）element-ui组件的大体架构

el-header负责上方; el-aside负责侧方; el-main 负责剩下蓝色区域。

（三）上方栏目布局

红点使el-badge设置的；我们把鼠标放在下拉这个按钮上，就会出下一个dropdown菜单。

我的项目

下拉

个人中心
设置
注销

（四） 侧方栏目布局

左边栏目el-aside的布局如下：

          <div >
            <el-menu style="background: #ececec" unique-opened router>
              <template v-for="(item,index) in itemlist" v-if="!item.hidden">
                <el-submenu :key="index" :index="index+''">
                  <template slot="title">
                    <span slot="title">{{item.name}}span>
                  template>
                  <el-menu-item width="180px"
                                 v-for="child in item.children"
                                :index="child.path"
                                :key="child.path">{{child.name}}
                  el-menu-item>
                el-submenu>
              template>
            el-menu>
          div>

（五）主体布局

最后是el-main中组件的布局

<el-breadcrumb separator-class="el-icon-arrow-right">
	<el-breadcrumb-item :to="{ path: '/home' }">首页el-breadcrumb-item>
		<el-breadcrumb-item v-text="this.$router.currentRoute.name">el-breadcrumb-item>
	el-breadcrumb>
	<keep-alive>
		<router-view v-if="this.$route.meta.keepAlive">router-view>
	keep-alive>
<router-view v-if="!this.$route.meta.keepAlive">router-view> 

我的使用

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/Home'}">首页el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/Home'}">还是首页el-breadcrumb-item>
      <el-breadcrumb-item v-text="this.$router.currentRoute.name">el-breadcrumb-item>
    el-breadcrumb>
  div>

• 在这里将接下来用户选中的组件显示出来

 <keep-alive>
       <router-view v-if="this.$route.meta.keepAlive">router-view>
keep-alive>
<router-view v-if="!this.$route.meta.keepAlive">router-view>