vue项目使用element-UI制作管理系统基本框架（包括菜单折叠，菜单条目路由跳转）_elementui管理系统框架

效果图如下：

 步骤一：安装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

到这里就结束啦！