devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE+Element-ui搭一个后台管理系统框架_@open="handleopen

作者：小小林熬夜学编程 | 2024-02-16 19:20:48

赞

踩

@open="handleopen

拟实现整体布局

确定一下我们后台框架的整体布局，就来个基础经典的

再看下实现之后的效果：

接下来一步一步走：

1、webstorm新建项目

接下来就等系统创建好后直接npm run serve，我们得到了一个默认的vue项目

2、在项目中引入Element-UI

参考官方说明：

我们进行npm安装

安装完毕之后，我们在main.js中进行引入：

参考官方说明：

整体引入：

3、利用el-container设置页面布局

参考官方说明：

考虑到我们的页面布局是由三个部分组成的，所以我们新建一个文件夹mainframe专门存放基础布局的vue页面

 

思路：layout.vue设置布局，为方便后期维护，提取TopMenu.vue和Left.vue两个组件，并分别引入。最后App.vue指向layout.vue

各页面代码：

layout.vue

  1. <template>
  2.     <el-container>
  3.         <el-header>
  4.             <TopMenu></TopMenu>
  5.         </el-header>
  6.         <el-container>
  7.             <el-aside width="200px">
  8.                 <LeftMenu></LeftMenu>
  9.             </el-aside>
  10.             <el-main>
  11.                 <div style="border:1px solid red;">这里是主界面</div>
  12.             </el-main>
  13.         </el-container>
  14.     </el-container>
  15. </template>
  16.  
  17. <script>
  18.  
  19.   import LeftMenu from "@/components/mainframe/LeftMenu";
  20.   import TopMenu from "@/components/mainframe/TopMenu";
  21.  
  22.   export default {
  23.     name: "TEMPLATE",
  24.     components: {
  25.       LeftMenu,
  26.       TopMenu
  27.     }
  28.   }
  29. </script>
  30.  
  31. <style scoped>
  32.  
  33. </style>

 

TopMenu.vue

  1. <template>
  2.     <div style="border:1px solid red;">
  3.         这里是上
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8.   export default {
  9.     name: "TEMPLATE"
  10.   }
  11. </script>
  12.  
  13. <style scoped>
  14.  
  15. </style>

 LeftMenu.vue

  1. <template>
  2.     <div style="border:1px solid red;">
  3.         这里是左
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8.   export default {
  9.     name: "TEMPLATE"
  10.   }
  11. </script>
  12.  
  13. <style scoped>
  14.  
  15. </style>

App.vue

  1. <template>
  2.   <div id="app">
  3.     <layout></layout>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import layout from "@/components/mainframe/layout";
  9.  
  10. export default {
  11.   name: 'App',
  12.   components: {
  13.     layout
  14.   }
  15. }
  16. </script>
  17.  
  18. <style>
  19. #app {
  20.   font-family: Avenir, Helvetica, Arial, sans-serif;
  21.   -webkit-font-smoothing: antialiased;
  22.   -moz-osx-font-smoothing: grayscale;
  23.   text-align: center;
  24.   color: #2c3e50;
  25.   margin-top: 60px;
  26. }
  27. </style>

注：为了方便看布局效果，我都设置了border

运行之后效果是这样的：哇哦，丑的好特别啊

4、利用el-menu设置顶栏和侧栏菜单样式

 

参考官方说明： 

layout.vue

  1. <template>
  2.     <el-container style="height:100%;width:100%;position:fixed;">
  3.         <el-header style="padding:0;">
  4.             <TopMenu></TopMenu>
  5.         </el-header>
  6.         <el-container style="height:calc(100% - 60px)">
  7.             <el-aside style="background: rgb(84, 92, 100);"  width="200px">
  8.                 <LeftMenu></LeftMenu>
  9.             </el-aside>
  10.             <el-main>
  11.                 <div style="border:1px solid red;">这里是主界面</div>
  12.             </el-main>
  13.         </el-container>
  14.     </el-container>
  15. </template>
  16.  
  17. <script>
  18.  
  19.   import LeftMenu from "@/components/mainframe/LeftMenu";
  20.   import TopMenu from "@/components/mainframe/TopMenu";
  21.  
  22.   export default {
  23.     name: "TEMPLATE",
  24.     components: {
  25.       LeftMenu,
  26.       TopMenu
  27.     }
  28.   }
  29. </script>
  30.  
  31. <style scoped>
  32.  
  33. </style>

TopMenu.vue:

  1. <template>
  2.     <div style="display:flex;flex-direction: row;justify-content: space-between;background:rgb(84, 92, 100);">
  3.         <div style="height:60px;font-size: 18px;font-weight: bolder;color: gold;line-height: 60px;padding-left: 24px; ">
  4.             {{systemName}}
  5.         </div>
  6.         <div>
  7.             <el-menu default-active=""
  8.                      background-color="#545c64"
  9.                      class="el-menu-demo"
  10.                      mode="horizontal"
  11.                      text-color="#ffffff">
  12.                 <el-menu-item @click="toScreen">
  13.                     <i class="el-icon-s-platform"></i>大屏展示
  14.                 </el-menu-item>
  15.                 <el-menu-item>
  16.                     <el-dropdown trigger="click">
  17.                         <div style="height:100%;">
  18.                             <i class="el-icon-user"></i>
  19.                             <span style="color:#fff">超级管理员</span>
  20.                             <i class="el-icon-caret-bottom" />
  21.                         </div>
  22.                         <el-dropdown-menu>
  23.                             <el-dropdown-item @click.native="resetPass">
  24.                                 <span style="display:block;">修改密码</span>
  25.                             </el-dropdown-item>
  26.                             <el-dropdown-item @click.native="logout">
  27.                                 <span style="display:block;">退出系统</span>
  28.                             </el-dropdown-item>
  29.                         </el-dropdown-menu>
  30.                     </el-dropdown>
  31.                 </el-menu-item>
  32.             </el-menu>
  33.         </div>
  34.     </div>
  35. </template>
  36.  
  37. <script>
  38.   export default {
  39.     name: "TopMenu",
  40.     data() {
  41.       return {
  42.         systemName: '我的后台管理系统',
  43.       }
  44.     },
  45.     methods: {
  46.     }
  47.   }
  48. </script>
  49.  
  50. <style scoped>
  51. </style>

LeftMenu.vue:

  1. <template>
  2.     <div>
  3.         <el-menu
  4.                 @close="handleClose"
  5.                 @open="handleOpen"
  6.                 active-text-color="#ffd04b"
  7.                 background-color="#545c64"
  8.                 class="el-menu-vertical-demo"
  9.                 text-color="#FBFBFB"
  10.                 width="200px"
  11.         >
  12.             <el-submenu index="1">
  13.                 <template slot="title">
  14.                     <i class="el-icon-user"></i>
  15.                     <span>员工管理</span>
  16.                 </template>
  17.                 <el-menu-item index="1-1"><i class="el-icon-user-solid"></i>员工管理</el-menu-item>
  18.                 <el-menu-item index="1-2"><i class="el-icon-s-management"></i>部门管理</el-menu-item>
  19.             </el-submenu>
  20.             <el-submenu index="2">
  21.                 <template slot="title">
  22.                     <i class="el-icon-setting"></i>
  23.                     <span>系统管理</span>
  24.                 </template>
  25.                 <el-menu-item index="2-1"><i class="el-icon-s-custom"></i>角色管理</el-menu-item>
  26.                 <el-menu-item index="2-2"><i class="el-icon-menu"></i>菜单管理</el-menu-item>
  27.                 <el-menu-item index="2-3"><i class="el-icon-s-check"></i>用户管理</el-menu-item>
  28.                 <el-menu-item index="2-4"><i class="el-icon-s-claim"></i>权限管理</el-menu-item>
  29.             </el-submenu>
  30.         </el-menu>
  31.     </div>
  32. </template>
  33.  
  34. <script>
  35.   export default {
  36.     name: "TEMPLATE",
  37.     data() {
  38.       return {
  39.  
  40.       }
  41.     },
  42.     methods: {
  43.       handleOpen(key, keyPath) {
  44.         console.log(key, keyPath);
  45.       },
  46.       handleClose(key, keyPath) {
  47.         console.log(key, keyPath);
  48.       }
  49.     }
  50.   }
  51. </script>
  52.  
  53. <style scoped>
  54.     /deep/ .el-submenu__title {
  55.         width: 200px;
  56.     }
  57.  
  58.     /deep/ .el-menu-item-group__title {
  59.         width: 200px;
  60.     }
  61. </style>

此时的效果如下：

5、设置路由 

以前我们要实现路由跳转基本思路都是在click事件中用

this.$router.push({ path: "/screen" });

实现跳转。

但现在只需要用到el-menu的属性来使问题简单化 

 参考官方说明：

先安装npm install --save vue-router
 添加路由js

相关代码：

路由index.js如下：

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. Vue.use(VueRouter);
  4.  
  5. import RoleManage from "@/components/views/RoleManage";
  6. import UserManage from "@/components/views/UserManage";
  7. import MenuManage from "@/components/views/MenuManage";
  8. const routes = [
  9.   {
  10.     path: '/user',
  11.     name: 'user',
  12.     component: UserManage
  13.   },
  14.   {
  15.     path: '/role',
  16.     name: 'role',
  17.     component: RoleManage
  18.   },
  19.   {
  20.     path: '/menu',
  21.     name: 'menu',
  22.     component: MenuManage
  23.   }
  24. ]
  25.  
  26. const router = new VueRouter({
  27.   mode: 'hash',
  28.   base: process.env.BASE_URL,
  29.   routes
  30. });
  31.  
  32.  
  33. export default router

在main.js中引入路由

main.js完整代码：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import ElementUI from 'element-ui';
  4. import 'element-ui/lib/theme-chalk/index.css';
  5. import router from './router'
  6. Vue.use(router);
  7. Vue.use(ElementUI);
  8. Vue.config.productionTip = false;
  9.  
  10. new Vue({
  11.   router,
  12.   render: h => h(App),
  13. }).$mount('#app')

设置el-menu属性

LeftMenu.vue完整代码：

  1. <template>
  2.     <div>
  3.         <el-menu
  4.                 @close="handleClose"
  5.                 @open="handleOpen"
  6.                 active-text-color="#ffd04b"
  7.                 background-color="#545c64"
  8.                 class="el-menu-vertical-demo"
  9.                 text-color="#FBFBFB"
  10.                 width="200px"
  11.                 router
  12.         >
  13.             <el-submenu index="1">
  14.                 <template slot="title">
  15.                     <i class="el-icon-user"></i>
  16.                     <span>员工管理</span>
  17.                 </template>
  18.                 <el-menu-item index="1-1"><i class="el-icon-user-solid"></i>员工管理</el-menu-item>
  19.                 <el-menu-item index="1-2"><i class="el-icon-s-management"></i>部门管理</el-menu-item>
  20.             </el-submenu>
  21.             <el-submenu index="2">
  22.                 <template slot="title">
  23.                     <i class="el-icon-setting"></i>
  24.                     <span>系统管理</span>
  25.                 </template>
  26.                 <el-menu-item index="/role"><i class="el-icon-s-custom"></i>角色管理</el-menu-item>
  27.                 <el-menu-item index="/menu"><i class="el-icon-menu"></i>菜单管理</el-menu-item>
  28.                 <el-menu-item index="/user"><i class="el-icon-s-check"></i>用户管理</el-menu-item>
  29.                 <el-menu-item index="2-4"><i class="el-icon-s-claim"></i>权限管理</el-menu-item>
  30.             </el-submenu>
  31.         </el-menu>
  32.     </div>
  33. </template>
  34.  
  35. <script>
  36.   export default {
  37.     name: "TEMPLATE",
  38.     data() {
  39.       return {
  40.  
  41.       }
  42.     },
  43.     methods: {
  44.       handleOpen(key, keyPath) {
  45.         console.log(key, keyPath);
  46.       },
  47.       handleClose(key, keyPath) {
  48.         console.log(key, keyPath);
  49.       }
  50.     }
  51.   }
  52. </script>
  53.  
  54. <style scoped>
  55.     /deep/ .el-submenu__title {
  56.         width: 200px;
  57.     }
  58.  
  59.     /deep/ .el-menu-item-group__title {
  60.         width: 200px;
  61.     }
  62. </style>

layout.vue 完整代码：

  1. <template>
  2.     <el-container style="height:100%;width:100%;position:fixed;">
  3.         <el-header style="padding:0;">
  4.             <TopMenu></TopMenu>
  5.         </el-header>
  6.         <el-container style="height:calc(100% - 60px)">
  7.             <el-aside style="background: rgb(84, 92, 100);"  width="200px">
  8.                 <LeftMenu></LeftMenu>
  9.             </el-aside>
  10.             <el-main>
  11.                 <!--<div style="border:1px solid red;">这里是主界面</div>-->
  12.                 <router-view/>
  13.             </el-main>
  14.         </el-container>
  15.     </el-container>
  16. </template>
  17.  
  18. <script>
  19.  
  20.   import LeftMenu from "@/components/mainframe/LeftMenu";
  21.   import TopMenu from "@/components/mainframe/TopMenu";
  22.  
  23.   export default {
  24.     name: "TEMPLATE",
  25.     components: {
  26.       LeftMenu,
  27.       TopMenu
  28.     }
  29.   }
  30. </script>
  31.  
  32. <style scoped>
  33.  
  34. </style>

关键点在于：

 

 TopMenu.vue代码同之前步骤，此处就不再赘述。

 6、最终实现效果：

 注：自动生成的项目总会有eslint，语法校验很严格，开发的时候很烦人，直接在package.json和package-lock.json与eslint相关的都删掉即可

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/96308
推荐阅读