Vue管理系统框架静态界面

最近使用Vue.js模仿Avuex的界面写了一个静态的管理系统框架界面，原因是开源的项目从里面挑出想要的东西并整合到自己的项目中真的是很困难，只是想要个简单的静态界面，于是就自己写了，希望大家也可以复用。（有很多地方细节还是没写好，希望以后加油！！！）

界面如下：

1）折叠前：

2）折叠后：

 

 代码如下： 

<template>
	<el-container>
		<div class="controlPanel-sidebar" width="220px">
			<el-menu class="el-menu-vertical-demo" 
				@open="handleOpen" 
				@close="handleClose" 
				:collapse="isCollapse"
				background-color="rgb(32,34,42)"
				text-color="rgba(255, 255, 255, 0.8)"
				active-text-color="#fff">
				<div class="Title1" v-if="!isCollapse"><span>控制台</span></div>
				<div class="Title2" v-if="isCollapse" style="width:60px;">A</div>

				<el-submenu index="1">
					<template slot="title">
						<i class="el-icon-data-board"></i>
						<span slot="title">工作台</span>
					</template>
					<el-menu-item index="1-1"><div class="barstyle"></div>通知公告</el-menu-item>
				</el-submenu>

				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-menu"></i>
						<span slot="title">事务管理</span>
					</template>
					<el-menu-item index="2-1"><div class="barstyle"></div>待办事务</el-menu-item>
					<el-menu-item index="2-2"><div class="barstyle"></div>办结事务</el-menu-item>
				</el-submenu>

				<el-submenu index="3">
					<template slot="title">