后台管理实例预览01.png
后台管理实例预览02.png
第一次搭建管理后台，使用vuecli2+elementui的组件
//创建一个项目
vue create hello-world
//按照文档集成element-ui 即可
npm i element-ui -S
一、创建左侧菜单栏和顶部导航
创建左侧菜单栏和顶部导航.png
二、布局的页面代码
<template>
<div class="common-layout">
<el-container>
<el-header class="header">
<HeaderV></HeaderV>
</el-header>
<el-container>
<el-aside width="200px">
<SideView></SideView>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import SideView from '../components/SideRight.vue'
import HeaderV from '../components/TopView.vue'
export default {
data() {
return {
}
},
methods: {
},
components: {
SideView, HeaderV
}
}
</script>
<style>
.common-layout{
background-color: rgb(246, 246, 247);
height: 100vh;
}
.header{
background-color: rgb(31, 209, 138);
}
.el-aside{
background-color: rgb(255, 255, 255);
height: 100vh;
}
.el-main{
height: 100vh;
}
</style>
三、左侧菜单栏布局代码
<template>
<div>
<el-col :span="12">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b" router>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-reading"></i>
<span>首页模块</span>
</template>
<el-menu-item-group>
<el-menu-item index="/shouye">选项1</el-menu-item>
<el-menu-item index="/shouye">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="/shujudata">
<i class="el-icon-document-copy"></i>
<span slot="title">Table表格</span>
</el-menu-item>
<el-menu-item index="/cardview">
<i class="el-icon-document"></i>
<span slot="title">Card卡片</span>
</el-menu-item>
<el-menu-item index="/dateview">
<i class="el-icon-date"></i>
<span slot="title">日历演示</span>
</el-menu-item>
<el-menu-item index="/timeline">
<i class="el-icon-cherry"></i>
<span slot="title">时间线段</span>
</el-menu-item>
<el-menu-item index="/yanshi">
<i class="el-icon-cherry"></i>
<span slot="title">演示UI</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style>
.el-menu-vertical-demo{
width: 200%;
height: 100vh;
}
</style>
基本搭建就是这么多，里面的花花页面在往里面深入即可，这属于死路由，可以改写成带权限的动态路由，调用后台接口增删页面。本篇代码已放置码云查看
GItHub代码地址
