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

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

（一）element-ui简析

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

1. el-container: 外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
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 负责剩下蓝色区域。

<template>
<div>
<el-container style="background: crimson;height: 100%;min-height100vh: ">
<el-header >
<span>我的项目
</el-header>
<el-container>
<el-aside style=“background: olive”>
</el-aside>
<el-main style=“background: aqua”>
</el-main>
</el-container>
</el-container>
</div>
</template>

（三）上方栏目布局

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

<span>我的项目</span>
<div>
<el-badge :is-dot=“true”>
<i class=“fa fa-bell-o”>
</el-badge>
<el-dropdown >
<span>下拉
<el-dropdown-menu slot=“dropdown”>
<el-dropdown-item>个人中心
<el-dropdown-item>设置
<el-dropdown-item>注销
</el-dropdown-menu>
</el-dropdown>
</div>

（四） 侧方栏目布局

左边栏目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>