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>