效果图如下:
步骤一:安装element-UI
npm i element-ui -S
步骤二:引用element-ui(局部引用)和路由模块
在main.js文件中按需引用你要使用的组件
//路由模块
import router from './router'
//element-ui的样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css'
//引入所需的组件
import { Container } from 'element-ui'
import { Menu } from 'element-ui'
import { Submenu } from 'element-ui'
import { MenuItem } from 'element-ui'
import { Main } from 'element-ui'
//注册
Vue.use(Container);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(Main);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
步骤三:创建编写主页面home.vue
<template>
<div class="com-page">
<div class="maintitle">后台管理系统</div>
<el-container style="height: 94%;">
<!-- default-active设置进入页面时默认打开的菜单条目路由(这里的/indexpage是首页菜单条目的路由);:router设置为真,打开路由;:collapse这里联合折叠图标实现菜单折叠与展开 -->
<el-menu default-active="/indexpage" :router="true" :collapse="isCollapse" background-color="#545c64"
text-color="#fff">
<div class="fold">
<!--折叠菜单的图标 -->
<i class="icon" :class="foldphoto" @click="isfold"></i>
</div>
<el-submenu index="1">
<template slot="title">
<!-- i标签的class值为element-UI官网icon图标值,可直接引用 -->
<i class="el-icon-s-home icon"></i>
<span>主页面</span>
</template>
<!-- index为对应菜单条目的路由,在router文件夹的index.js中设置 -->
<el-menu-item index="/indexpage">首页</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-s-data icon"></i>
<span>用户数据</span>
</template>
<el-menu-item index="/userdatapage">用户数据</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-s-custom icon"></i>
<span>用户管理</span>
</template>
<el-menu-item index="/usermanagepage">用户管理</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-s-tools icon"></i>
<span>设置</span>
</template>
<el-menu-item index="settingpage">退出登录</el-menu-item>
</el-submenu>
</el-menu>
<el-main>
<!--引入跳转路由-->
<router-view></router-view>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
isCollapse: false,//默认为不折叠菜单
foldphoto: "el-icon-s-unfold",//菜单展开图标
}
},
mounted() {
},
methods: {
isfold() {
//每次点击折叠图标值取反
this.isCollapse = !this.isCollapse
if (this.isCollapse) {
//折叠图标
this.foldphoto = "el-icon-s-fold"
} else {
//展开图标
this.foldphoto = "el-icon-s-unfold"
}
}
}
}
</script>
<style scoped>
.maintitle {
height: 6%;
/* border: 1px solid green; */
padding-left: 1.2rem;
display: flex;
align-items: center;
font-size: 1.6rem;
letter-spacing: 0.2rem;
/* font-weight: bold; */
background-color: #545c64;
color: white;
}
/* 图标样式 */
.icon {
color: white;
}
/* 折叠图标 */
.fold {
height: 3rem;
/* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 0.3rem;
margin-bottom: 0.6rem;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
步骤四:创建菜单条目页面并设置路由
创建首页indexpage.vue文件,内容如下(其他菜单条目页面创建方法一致,内容自己完善)
<template>
<div class="com-page">
111
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
在router文件夹下的index.js中设置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '@/views/home'
import indexpage from '@/views/indexpage'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
name: 'home',
component: home,
children: [
//这里设置菜单条目路由,这里只举例设置一个
{
path: '/indexpage',
name: 'indexpage',
component: indexpage
}
]
}
]
const router = new VueRouter({
routes
})
export default router
element-UI学习链接:
https://element-plus.gitee.io/zh-CN/component/menu.html
https://element.eleme.cn/#/zh-CN/component/icon
到这里就结束啦!