<el-menu-item index="2">在线商城</el-menu-item>
<el-menu-item index="3">客户管理</el-menu-item>
<el-menu-item index="4">系统设置</el-menu-item>
<el-menu-item index="5">活动发布</el-menu-item>
</el-menu>
</el-col>
</el-row>
</header>
<div style="position: relative;height: 60px;width: 100%;"></div>
<main>
<!-- 左侧导航 -->
<div class="main-left">
<el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true">
<el-menu-item index="/activePublic" :class="{'isActive': active}">活动发布</el-menu-item>
<el-menu-item index="/activeManage" :class="{'isActive': !active}">活动管理</el-menu-item>
</el-menu>
</div>
<!-- 右侧主内容区 -->
<div class="main-right" >
</div>
</main>
</div>
</template>
<script>
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
export default {
name: 'app',
data: function (){
return {
active:true
}
}
}
</script>
<style>
body{margin: 0;}
#app {
min-width: 1200px;
margin: 0 auto;
font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
}
/* 头部导航 */
header{z-index: 1000;min-width: 1200px;transition: all 0.5s ease; border-top: solid 4px #3091F2; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04); }
header.header-fixed{position: fixed;top: 0;left: 0;right: 0;}
header .el-menu-demo{padding-left: 300px!important;}
/* 主内容区 */
main{ display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 800px; border: solid 40px #E9ECF1; background-color: #FCFCFC; }
main .main-left{text-align: center;width: 200px;float: left;}
main .main-right{-webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #fff; padding: 50px 70px; }
main .el-menu{background-color: transparent!important;}
</style>
4.4 预览项目,看到如图所示页面，项目的首页就搭建好了
$ cnpm run dev
在下篇文章小编给大家介绍使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二），敬请关注！
以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
