Vue应用开发过程中，包含大量的生态插件，如VueRouter、VueCli、Vuex、axios等处理数据部分的插件之外，也有一些支持界面设计的框架，如经常用于PC端项目界面的ElementUI、用于移动端的Vant等

1.安装和引入

ElementUI作为一个第三方插件，需要在当前项目中安装和引入之后才能正常使用

npm install element-ui -s

引入

import Vue from 'vue'
import ElementUI from 'element-ui' //引入ElementUI支持
import 'element-ui/lib/theme-  chalk/index.css' //引入elementui 样式文件
Vue.use(ElementUI) //注册elementui
new Vue({
	...
})

2.ElementUI布局组件

<el-container>
    <el-header>Header</el-header>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
    </el-container>
</el-container>

3.ElementUI页面组件

侧边导航栏

<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-user-solid"></i>
        <span slot="title">管理员管理</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-user"></i>
        <span slot="title">会员管理</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-s-goods"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <span slot="title">常规设置</span>
      </el-menu-item>
    </el-menu>
</template>

4.导航视图切换

<template>
  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      router
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="/main/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      ...
    </el-menu>
....
</template>

todo…