搭建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 = false
new 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;