ElementUI案例演示:导航、布局、加载动画

知识点

1.vue-router之嵌套路由 
http://router.vuejs.org/zh-cn/essentials/nested-routes.html 
2.element-ui 
导航组件、布局组件、加载动画 
http://element.eleme.io/#/zh-CN/component/menu 
http://element.eleme.io/#/zh-CN/component/layout 
http://element.eleme.io/#/zh-CN/component/loading

 
 
el-nav.vue:

<template>
    <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" :router="true">
        <el-menu-item index="/elindex/hot">处理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">订单管理</el-menu-item>
    </el-menu>
</template>
   
   
   

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12
   

el-index:

<template>
    <div>
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>