搭建element-ui的Vue前端工程操作实例

<template>	<el-row class="container">		<el-col :span="24" class="header">		 <el-col :span="20" class="logo">		  <img src="./assets/logo4.png" /> <span>学校管理<i class="txt">系统</i></span>		 </el-col>		 <el-col :span="4" class="userinfo">				<el-dropdown trigger="click">					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>						<el-dropdown-menu slot="dropdown">						<el-dropdown-item>我的消息</el-dropdown-item>						<el-dropdown-item>设置</el-dropdown-item>						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>					</el-dropdown-menu>				</el-dropdown>		  </el-col>		</el-col>		<el-col :span="24" class="main">			<aside>			<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"			theme="dark" unique-opened router>				<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">					<el-submenu :index="index+''" v-if="!item.leaf">						<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>						<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>					</el-submenu>					<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>				</template>			</el-menu>			</aside>			<section class="content-container">				 <div class="grid-content bg-purple-light">					<el-col :span="24" class="breadcrumb-container">						<strong class="title">{{$route.name}}</strong>						<el-breadcrumb separator="/" class="breadcrumb-inner">							<el-breadcrumb-item v-for="item in $route.matched">								 {{ item.name }}							</el-breadcrumb-item>						</el-breadcrumb>					</el-col>					<el-col :span="24" class="content-wrapper">						<transition>						<router-view></router-view>						</transition>					</el-col>				</div>			</section>		</el-col>	</el-row></template><script> export default{		data() {			return { 				sysUserName:''			}	 },		methods:{				onSubmit() {				console.log('submit!');				},				handleopen() {				//console.log('handleopen');				},				handleclose() {				//console.log('handleclose');				},				handleselect: function (a, b) {				},				//退出登录				logout: function () {					var _this = this;					this.$confirm('确认退出吗?', '提示', {					//type: 'warning'					}).then(() => {					sessionStorage.removeItem('user');					_this.$router.push('/login');					}).catch(() => {      				}); 			}		} }</script> <style scoped lang="scss">.container {	position: absolute;	top: 0px;	bottom: 0px;	width: 100%;	.header {		height: 60px;		line-height: 60px;		background: #1F2D3D;		color: #c0ccda;		.userinfo {				text-align: right;				padding-right: 35px;				.userinfo-inner {				color: #c0ccda;				cursor: pointer;				img {				width: 40px;				height: 40px;				border-radius: 20px;				margin: 10px 0px 10px 10px;				float: right;				}			}		}		.logo {			font-size: 22px;			img {			width: 40px;			float: left;			margin: 10px 10px 10px 18px;			}			.txt {			color: #20a0ff			}		}	}	.main {		background: #324057;		position: absolute;		top: 60px;		bottom: 0px;		overflow: hidden;		aside {		width: 230px;		}	.content-container {		background: #f1f2f7;		position: absolute;		right: 0px;		top: 0px;		bottom: 0px;		left: 230px;		overflow-y: scroll;		padding: 20px;		.breadcrumb-container {			margin-bottom: 15px;			.title {				width: 200px;				float: left;				color: #475669;			}			.breadcrumb-inner {				float: right;			}  }	 .content-wrapper {			background-color: #fff;			box-sizing: border-box;	 }  } }}</style>

import Vue from 'vue'import Router from 'vue-router' import App from './App'import routes from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'Vue.use(Router) Vue.use(ElementUI)const router = new Router({ routes});Vue.config.productionTip = falsenew Vue({  router,  render: h => h(App)}).$mount('#app')

import Home from './Home' import classes from './class/classes' import student from './student/student' let router = [ {  path: '/',  name: '学校',  component: Home,  redirect: '/classes', iconCls: 'fa fa-id-card-o', children: [{ path: '/classes', component: classes, name: '班级管理' },{ path: '/student', component: student, name: '学生管理' }  ]  }]; export default router;