Vue2.0中Element UI的使用

一、安装

在终端输入 cnpm i element-ui -S
安装完毕后，可以在node_modules文件夹查找到element-ui文件夹

二、引入ElementUI

打开项目的main.js，添加以下代码即可

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

三、Element UI使用

①Element UI官网：

https://element.eleme.cn/#/zh-CN

②开发后台管理系统的常用标签

• el-container：构建整个页面框架
• el-aside：构建左侧菜单
• el-menu：左侧菜单内容，常用属性：
  :default-openeds=['index']：默认展开的菜单，通过菜单的index值来关联
  :default-active=['index']：默认选中菜单，通过index关联
• el-submenu：可展开的菜单，常用属性：
  index：菜单的下标，文本类型，不是数值类型。例<el-submenu index="xx">
• template：对应el-submenu的菜单名。
• i标签：设置菜单图标，通过class属性来设置。<i calss="el-icon-iconName"/>
• el-menu-item：设置菜单的子节点，不可再展开
  index：菜单的下标，文本类型，不是数值类型。例<el-menu-item index="xx">

③使用实例

Vue通过route动态构建菜单
menu与router绑定
1.<el-menu>标签添加router属性
2.在页面中添加<router-view>标签，它是一个容器，动态渲染选择的router
3.<el-menu-item>的index值是要跳转的router
使用示例（仅展示部分重要代码）：
App.vue

<el-container style="height: 500px; border: 1px solid #eee">
  <!--左侧菜单-->
    <el-aside width="200px" style="background-color: white">
      <!--一级菜单，默认打开导航1和导航2-->
      <el-menu router :default-openeds="['0','1']"> 
      	<!-- 遍历一级菜单的内容,若show为true则显示出来-->
        <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''" v-if="item.show">
          <template slot="title"><i class="el-icon-message"></i>{{ item.name }}</template>
          <!--遍历二级菜单内容并显示，class是选择某页面后展示的样式-->
          <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path"
            :class="$route.path==item2.path?'is-active':''">{{ item2.name }}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!--右侧主页面-->
    <el-main>
      <!--展示选择的页面-->
      <router-view></router-view>
    </el-main>
  </el-container>

index.vue

<template>
  <router-view></router-view>
</template>

router/index.js

const routes =[
  {
    path: '/',
    name: '导航1',
    component:Index,
    show:true,
    redirect:"/PageOne",	//默认页面
    children:[{
        path: '/PageOne',
        name: '页面1',
        component:PageOne},
      {path: '/页面2',
        name: '添加图书',
        component:PageTwo}]
  },
  {
    path:'/navigation',
    name:'导航二',
    show:true,
    component:Index,
    children:[{
        path: '/PageThree',
        name: '页面3',
        component:PageThree
      }]
  }]

效果图：