一、 项目准备
二、基本布局
2.1 框架布局
2.1.1 Container 布局容器
项目开始时,首先对整个界面进行一个基本的布局,在ui官网中,选择Container 布局容器,找到适合此次项目布局的格式并把代码复制下来,粘贴到App.vue文件中:
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
}
</style>
运行结果如下图所示,基础布局成功:
2.1.2 基本样式布局
首先在<style lang="less" scoped>
里面添加样式,头部标签为 <el-header>
,侧边栏为<el-aside>
,主体部分为<el-main>
<style lang="less" scoped>
// 整体样式
.el-container {
height: 100vh;
}
// 头部样式
.el-header {
background-color: #373d41;
}
// 侧边栏样式
.el-aside {
background-color: #333744;
}
// 主体部分样式
.el-main {
background-color: #eaedf1;
}
</style>
为了清除内外边距,我们需要在外部引入一个全局样式的css文件
在src\assets文件夹下创建一个css.css文件,用来定义全局样式,里面输入清除内外边距的代码
*{
margin: 0;
padding: 0;
}
最后运行结果,基本布局完成
此次部分App.vue完整代码如下:
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
// 引入外部css文件
import '@/assets/css.css'
export default {}
</script>
<style lang="less" scoped>
// 整个布局容器100%
.el-container {
height: 100vh;
}
// 头部样式
.el-header {
background-color: #373d41;
}
// 侧边栏样式
.el-aside {
background-color: #333744;
}
// 主体部分样式
.el-main {
background-color: #eaedf1;
}
</style>
2.2 头部布局
在头部显示logo和名称,最右面还有一个按钮,logo就用Vue脚手架自带的,在<el-header>
标签中把里面的内容替换成
<div>
<img src="@/assets/logo.png" />
<span>电商后台管理系统</span>
</div>
<el-button type="info">退出</el-button>
给头部设置样式
.el-header {
background-color: #373d41;
display: flex;
justify-content: space-between;
align-items: center;
div {
display: flex;
color: #fff;
font-size: 25px;
span {
margin-left: 15px;
}
img {
width: 45px;
height: 45px;
}
}
}
最后运行结果
2.3 侧边栏导航
在ui官网上找到合适的导航菜单复制下来,
注:要在下方的代码的基础上进行修改
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
然后再在style标签下面添加粘贴过来的样式:
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
修改之后侧边栏的格式
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#333744"
text-color="#fff"
active-text-color="#ffd04b"
:router="true"
>
<!-- 首页 -->
<el-menu-item index="/home">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/user">
<i class="el-icon-menu"></i>
<span slot="title">用户管理</span>
</el-menu-item>
<!-- 导航一 -->
<el-submenu index="/shop">
<template slot="title">
<i class="el-icon-location"></i>
<span>商品管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/schedule">选项一</el-menu-item>
<el-menu-item index="1-2">选项二</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">导航三</template>
<el-menu-item index="1-4-1">选项三</el-menu-item>
<el-menu-item index="1-4-2">选项四</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="data">
<i class="el-icon-setting"></i>
<span slot="title">数据统计</span>
</el-menu-item>
</el-menu>
</el-aside>
2.4 侧边栏的展开和折叠
在ui官网中可以查到控制菜单展开和折叠的是collapse属性,我们只需要定义一个按钮,然后点击这个按钮就直接改变collapse的值是true还是false。
在侧边栏最顶部加入一个按钮<div class="open-btn" @click="openBtn">|||</div>
,并且在style标签下设置一下按钮格式
.open-btn {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;// 居中显示
letter-spacing: 0.2em; //字体之间的间隙
cursor: pointer; //鼠标变成小手
}
样式设置完成,开始执行点击事件,在<el-menu>
标签内加入collapse属性::collapse="isCollapse"
,然后在<script>
标签下暴露collapse数据的一个布尔返回值。
export default {
data () {
return {
isCollapse: false
}
}
在 methods方法里添加点击事件
methods: { openBtn () { this.isCollapse = !this.isCollapse } }
侧边栏展开功能开发完毕,自此基本页面布局完成
附:布局所有App.vue源码
<template>
<el-container>
<!-- 头部区域 -->
<el-header>
<div>
<img src="@/assets/logo.png" />
<span>电商后台管理系统</span>
</div>
<el-button type="info">退出</el-button>
</el-header>
<!-- 侧边栏区域 -->
<el-container>
<el-aside width="auto">
<div class="open-btn" @click="openBtn">|||</div>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
background-color="#333744"
text-color="#fff"
active-text-color="#ffd04b"
:router="true"
>
<!-- 首页 -->
<el-menu-item index="/home">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/user">
<i class="el-icon-menu"></i>
<span slot="title">用户管理</span>
</el-menu-item>
<!-- 导航一 -->
<el-submenu index="/shop">
<template slot="title">
<i class="el-icon-location"></i>
<span>商品管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/schedule">选项一</el-menu-item>
<el-menu-item index="1-2">选项二</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">导航三</template>
<el-menu-item index="1-4-1">选项三</el-menu-item>
<el-menu-item index="1-4-2">选项四</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="data">
<i class="el-icon-setting"></i>
<span slot="title">数据统计</span>
</el-menu-item>
</el-menu>
</el-aside>
<!-- 主体区域 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
// 引入外部css文件
import '@/assets/css.css'
export default {
data () {
return {
isCollapse: false
}
},
methods: {
openBtn () {
this.isCollapse = !this.isCollapse
}
}
}
</script>
<style lang="less" scoped>
// 整个布局容器100%
.el-container {
height: 100vh;
}
// 头部样式
.el-header {
background-color: #373d41;
display: flex;
justify-content: space-between;
align-items: center;
div {
display: flex;
color: #fff;
font-size: 25px;
span {
margin-left: 15px;
}
img {
width: 45px;
height: 45px;
}
}
}
// 侧边栏样式
.el-aside {
background-color: #333744;
}
.el-menu {
background-color: #333744;
}
.open-btn {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
// 主体部分样式
.el-main {
background-color: #eaedf1;
}
</style>