给妹妹做毕设,顺便记录一波
分为三个部分:头部,左侧、主页面
准备工作:已经搭建好前端的环境,且成功运行了最基础的项目
参考https://editor.csdn.net/md/?articleId=136949632
参考element-ui组件:https://element.eleme.io/2.13/#/zh-CN/component/installation
Container 布局容器、NavMenu 导航菜单-侧栏
1、基本的框架
App.vue
<template>
<div id="app">
<el-container>
<el-header style="background-color:#4c535a">
<img src="@/assets/logo.png" alt="" style="width:40px;position:relative;top:10px;">
<span style="font-size:20px;maigin-left:15px;color:white">后台管理系统</span>
</el-header>
</el-container>
<el-container>
<el-aside style="overflow:hidden;min-height:100vh;background-color:#545c64;width:250px">
</el-aside>
<el-main>
</el-main>
</el-container>
</div>
</template>
2.左侧导航 App.vue
<template>
<div id="app">
<el-container>
<el-header style="background-color:#4c535a">
<img src="@/assets/logo.png" alt="" style="width:40px;position:relative;top:10px;">
<span style="font-size:20px;maigin-left:15px;color:white">后台管理系统</span>
</el-header>
</el-container>
<el-container>
<el-aside style="overflow:hidden;min-height:100vh;background-color:#545c64;width:250px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>信息管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">管理员信息</el-menu-item>
<el-menu-item index="1-2">用户信息</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
</el-main>
</el-container>
</div>
</template>
<style>
.el-menu{
border-right: none !important;
}
</style>
3.主体部分App.vue
App.vue主要部分
<el-main>
<router-view/>
</el-main>
App.vue整体部分
<template>
<div id="app">
<el-container>
<el-header style="background-color:#4c535a">
<img src="@/assets/logo.png" alt="" style="width:40px;position:relative;top:10px;">
<span style="font-size:20px;maigin-left:15px;color:white">后台管理系统</span>
</el-header>
</el-container>
<el-container>
<el-aside style="overflow:hidden;min-height:100vh;background-color:#545c64;width:250px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">系统首页</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>信息管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">管理员信息</el-menu-item>
<el-menu-item index="1-2">用户信息</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>
<style>
.el-menu{
border-right: none !important;
}
</style>