Vue+ElementUI的电商管理系统实例02主页1、打开Element⽹站，到主页需要的布局格式
修改Home.vue：
<template>
<el-container class="home-container">
<!-- 头部 -->
<el-header>
Header
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 主体 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右侧内容主体 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
methods: {
logout() {
/
/ 清空token
window.sessionStorage.clear('token')
// 跳转到登录页
this.$router.push('/login')
}
}
}
</script>
<style lang="less" scoped>
.home-container {
height: 100%;
}
.el-header {
background: #373d41;
color: #fff;
}
.el-aside {
background: #333744;
}
.el-main {
background: #eaedf1;
}
</style>
效果图如下：
2、美化Header区域布局样式
<template>
<el-container class="home-container">
<!-- 头部 -->
<el-header>
<div>
<img src="../assets/heima.png" alt="">
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 主体 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右侧内容主体 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<style lang="less" scoped>
.el-header {
background: #373d41;
color: #fff;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
font-size: 20px;
> div {
display: flex;align-items: center;
span {margin-left: 15px;}
}
}
.el-aside {
background: #333744;
}
.el-main {
background: #eaedf1;
}
</style>
3、左侧导航菜单
菜单分为⼆级，并且可以折叠
到Element⾥的导航菜单代码：
<!--左侧导航菜单-->
<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-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航⼀</span>
</template>
<el-menu-item-group>
<template slot="title">分组⼀</template>
<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">
<template slot="title">选项4</template>
<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>
然后在element.js⾥添加：
import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main,  Menu, Submenu, MenuItemGroup, MenuItem } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
// 挂载到Vue全局
Vue.prototype.$message = Message
简单修改导航菜单代码：
<!--左侧导航菜单-->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
<!-- ⼀级菜单 -->
<el-submenu index="1">
<!-- ⼀级菜单模板区域 -->
<template slot="title">
<i class="el-icon-location"></i>
<span>导航⼀</span>
</template>
<!-- ⼆级菜单-->
<el-menu-item index="1-1">
<template slot="title">
<i class="el-icon-location"></i>
<span>选项1</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
4、通过axios添加token验证
接⼝说明⾥：
API V1 认证统⼀使⽤ Token 认证
需要授权的 API ，必须在请求头中使⽤ `Authorization` 字段提供 `token` 令牌修改main.js⽂件：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
// 导⼊全局样式表
import './assets/css/global.css'
// 导⼊字体样式
import './assets/fonts/iconfont.css'
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = '127.0.0.1:8888/api/private/v1/'
// axios请求拦截
quest.use(config => {
console.log(config)
// 为请求头对象，添加token验证的Authorization字段
config.headers.Authorization = Item('token')
// 最后必须return config
return config
})
Vue.prototype.$http = axios
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
重新退出，再登录，打开浏览器Network会发现：
5、获取左侧菜单数据
打开接⼝⽂档，发现请求路径：menus，请求⽅法：get
// 获取左侧菜单数据
async getMenuList() {
const { data: res } = await this.$('menus')
console.log(res)
if (a.status !== 200) return this.$(a.msg)
6、双层for循环渲染左侧菜单列表
⼀级菜单：
<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
<!--index前⾯加: 变为动态绑定数据，这时会报错，因为index只接受字符串，最简单的办法是后⾯ +'' -->
⼆级菜单：
<el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
<template slot="title">导航菜单
<i class="el-icon-location"></i>
<span>{{subItem.authName}}</span>
</template>
</el-menu-item>
效果图：
7、为选中菜单设置字体颜⾊并添加分类图标
active-text-color="#409eff"
//激活的⽂本颜⾊替换成⾃⼰想要的颜⾊就⾏了
先把⼆级菜单的图标替换为：
<i class="el-icon-menu"></i>
给每个⼀级菜单替换不同的图标：
新建⼀个图标对象，每⼀个菜单项都有⼀个唯⼀的id，我们就以id为key，对应的图标当做value，然后绑定:class <!-- ⼀级菜单模板区域 -->
<template slot="title">
<i :class="iconsObject[item.id]"></i>
<span>{{item.authName}}</span>
</template>
<script>
export default {
data() {
return {
menuList: [], // 左侧菜单数据
iconsObject: { //⼀级菜单图标对象 125 103这些是menuList⼀级菜单的id
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
}
}
},
}
</script>
<style lang="less" scoped>
.
iconfont {
margin-right: 10px;
}
</style>
效果图：
8、每次只允许展开⼀个⼀级菜单
Menu Attribute⾥有个unique-opened属性：表⽰是否只保持⼀个⼦菜单的展开默认为false
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" :unique-opened="true">
<!--如果把某个值重置为true的话，可以简写-->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened>
注意：如果unique-opened="true"这样写，这个true只是字符串，必须前⾯加上：才表⽰布尔值。
边框线问题：
.el-aside {
background: #333744;
}
}
9、实现左侧菜单折叠与展开效果
在侧边栏与左侧菜单之间添加div和样式：
<el-aside width="200px">
<div class="toggle-button">|||</div>
<style lang="less" scoped>
.toggle-button {
background: #4a5064;
color:#fff;
font-size: 10px;
line-height:24px;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;
}
</style>
然后添加点击事件：
Menu Attribute⾥有个collapse属性：表⽰是否⽔平折叠收起菜单（仅在 mode 为 vertical 时可⽤）默认为false
<div class="toggle-button" @click="toggleCollapse">|||</div>
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" :unique-opened="true" :collapse="isCollapse">
<script>
export default {
data() {
return {
isCollapse: false// 菜单是否折叠
}
},
methods: {
// 点击切换左侧菜单的折叠与展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
}
}
}
</script>
现在点击按钮已经有切换效果了，不过有点卡顿。
Menu Attribute⾥有个collapse-transition属性：表⽰是否开启折叠动画默认是true开启状态，我们把它关闭就好了
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"
:unique-opened="true" :collapse="isCollapse" :collapse-transition="false">
这时候发现菜单折叠后，效果如下：
检查代码发现侧边栏宽度是写死的200px，我们想要的效果是，当菜单折叠起来后，侧边栏也跟着缩⼩。
查看元素发现菜单折叠后的宽度是64px，我们就可以根据是否折叠来动态赋值。当isCollapse为真时宽度64，否则200 <el-aside :width="isCollapse ? '64px' : '200px'">
这时折叠后效果：
10、实现⾸页路由的重定向
新建Welcome.vue：
<template>
<div>
<h3>Welcome</h3>
</div>
</template>
修改路由⽂件，建⽴Welcome路由在Home⼦路由中：
import Welcome from '../components/Welcome.vue'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。