devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue + ElementUI 实现后台管理系统模板 -- 前端篇（四）：定义主页面_el-menu--horizontal

作者：凡人多烦事01 | 2024-02-19 07:54:17

赞

踩

el-menu--horizontal

一、定义主页面

 

主页面 可以拆分成多个组件，每个组件负责一部分页面的显示。
　　拆分成 Header、Aside、Footer、Content 四个页面。
其中：
　　Header          用于定义导航栏信息
　　Aside             用于定义菜单栏信息

       Footer             用于定义底部信息
　　Content         用于显示各个菜单选项的页面

1》config配置路径

（1）简介

（2）安装

npm install path -S

（3）配置

  1. const path = require('path')
  2.  
  3. function resolve(dir) {
  4.   return path.join(__dirname, dir)
  5. }
  6. module.exports = {
  7.   devServer: {
  8.     port: 4000
  9.   },
  10.   configureWebpack: {
  11.     resolve: {
  12.       alias: {
  13.         '~': resolve('./'),
  14.         '@': resolve('src'),
  15.         "assets": "@/assets",
  16.       }
  17.     }
  18.   }
  19. }

（4）重启服务

2》home.vue

 （1）简介

结构页

（2）页面

  1. <template>
  2.   <el-container class="container" v-loading="false" element-loading-text="拼命加载中" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading">
  3.     <!-- 侧边栏 -->
  4.     <Aside :foldAside="foldAside" />
  5.     <!--
  6.         direction="vertical"  用于垂直布局
  7.     -->
  8.     <el-container direction="vertical">
  9.       <!-- 头部导航栏 -->
  10.       <el-header height="50"> <Header /></el-header>
  11.       <!-- 内容 -->
  12.       <el-container class="wrapper">
  13.         <Content />
  14.       </el-container>
  15.       <!-- 底部 -->
  16.       <div class="footer">
  17.         <Footer />
  18.       </div>
  19.     </el-container>
  20.   </el-container>
  21. </template>
  22.  
  23. <script>
  24. import Header from '@/components/common/header.vue';
  25. import Aside from '@/components/common/aside.vue';
  26. import Footer from '@/components/common/footer.vue';
  27. import Content from '@/components/common/content.vue';
  28.  
  29. export default {
  30.   name: 'Home',
  31.   components: {
  32.     Header,
  33.     Aside,
  34.     Footer,
  35.     Content,
  36.   },
  37.   data() {
  38.     return {
  39.       foldAside: true,
  40.     };
  41.   },
  42.   methods: {
  43.     foldOrOpen(data) {
  44.       this.foldAside = data;
  45.     },
  46.   },
  47. };
  48. </script>
  49. <style>
  50. .container {
  51.   height: 100%;
  52. }
  53. .wrapper {
  54.   height: calc(100vh - 100px);
  55. }
  56. .wrapper_con {
  57.   padding-bottom: 0;
  58. }
  59. </style>

3》header.vue 

（1）简介
　　通过导航栏，可以进行一些操作。比如：折叠侧边栏、修改密码、退出登录等。

（2）页面代码（路径地址：/src/components/common/header.vue）

  1. <template>
  2.   <div class="header">
  3.     <!-- 是否展开侧边栏 -->
  4.     <div class="header-title" @click="foldOrOpen">
  5.       <a class="el-icon-s-fold" v-if="foldAside" title="折叠侧边栏" />
  6.       <a class="el-icon-s-unfold" v-else title="展开侧边栏" />
  7.     </div>
  8.     <!-- 设置、文档、用户设置等 -->
  9.     <div class="header-menu">
  10.       <el-menu mode="horizontal" class="header-menu-submenu">
  11.         <el-menu-item title="设置" index="1" to="/">网站首页 </el-menu-item>
  12.         <el-menu-item title="清除缓存" index="2" @click="onClear">清除缓存 </el-menu-item>
  13.         <el-menu-item title="系统更新" index="3" @click="onUpdate"> 系统更新 </el-menu-item>
  14.         <el-menu-item title="帮助" index="5">帮助</el-menu-item>
  15.         <el-menu-item title="设置" index="4"> <i class="el-icon-setting"></i>设置 </el-menu-item>
  16.         <!-- 用户设置 -->
  17.         <el-submenu title="用户设置" index="6">
  18.           <template slot="title">
  19.             <span class="header-span"> <img src="@/assets/images/avatar.png" :alt="userName" /> {{ userName }} </span>
  20.           </template>
  21.           <el-menu-item index="6-1" @click="showPasswordBox"> <i class="el-icon-edit"></i>修改密码 </el-menu-item>
  22.           <el-menu-item index="6-2" @click="logout"> <i class="el-icon-close"></i>退出 </el-menu-item>
  23.         </el-submenu>
  24.       </el-menu>
  25.     </div>
  26.  
  27.   </div>
  28. </template>
  29.  
  30. <script>
  31. export default {
  32.   name: 'Header',
  33.   data() {
  34.     return {
  35.       // 是否展开侧边栏
  36.       foldAside: true,
  37.       // 默认用户名
  38.       userName: 'admin',
  39.       // 是否展开密码框
  40.       UpdatePasswordVisible: false,
  41.     };
  42.   },
  43.   components: {
  44.  
  45.   },
  46.   methods: {
  47.     // 展开密码修改框
  48.     showPasswordBox() {
  49.       this.UpdatePasswordVisible = true;
  50.       // this.$nextTick 表示数据渲染后，执行密码框初始化
  51.       this.$nextTick(() => {
  52.         this.$refs.updatePassowrd.init();
  53.       });
  54.     },
  55.     // 展开、折叠侧边栏
  56.     foldOrOpen() {
  57.       alert('侧边栏逻辑未完成');
  58.       console.log('foldOrOpen');
  59.     },
  60.     // 退出登录，回到登录界面
  61.     logout() {
  62.       // TODO：退出逻辑待完成
  63.       alert('退出逻辑未完成');
  64.       this.$router.push({
  65.         name: 'Login',
  66.       });
  67.     },
  68.     // 清除缓冲
  69.     onClear() {
  70.       console.log('onClear');
  71.     },
  72.     // 系统更新
  73.     onUpdate() {
  74.       console.log('onUpdate');
  75.     },
  76.   },
  77. };
  78. </script>
  79.  
  80. <style>
  81. .header {
  82.   padding: 0 10px;
  83.   display: flex;
  84.   height: 50px;
  85.   line-height: 50px;
  86.   border-bottom: solid 1px #e6e6e6;
  87. }
  88.  
  89. .header-title {
  90.   height: 50px;
  91.   width: 50px;
  92.   float: left;
  93.   font-size: 30px;
  94.   cursor: pointer;
  95. }
  96.  
  97. .header-menu {
  98.   height: 50px;
  99.   width: 100%;
  100.   flex: 1;
  101.   line-height: 50px;
  102.   font-size: 30px;
  103. }
  104. .header-menu-submenu {
  105.   float: right;
  106. }
  107. .header-submenu-a {
  108.   text-decoration: none;
  109.   color: #4cc4b8;
  110.   font-weight: bold;
  111.   font-size: 14px;
  112. }
  113. .header-submenu-a:hover {
  114.   background-color: #2c3e50;
  115. }
  116. .el-menu--horizontal > .el-menu-item,
  117. .el-menu--horizontal > .el-submenu .el-submenu__title {
  118.   height: 50px !important;
  119.   line-height: 50px !important;
  120.   padding: 0 10px !important;
  121. }
  122. .el-menu--collapse .el-menu .el-submenu,
  123. .el-menu--popup {
  124.   min-width: auto !important;
  125. }
  126. .header-span img {
  127.   width: 40px;
  128.   height: 40px;
  129.   line-height: 40px;
  130.   margin: 5px 5px 10px 10px;
  131.   border-radius: 50%;
  132. }
  133. .header-span {
  134.   font-size: 20px;
  135.   border-radius: 50%;
  136. }
  137. </style>

4》aside.vue

（1）简介
　　用于定义侧边栏，显示菜单。

（2）页面(路径地址：/src/components/common/aside.vue)

  1. <template>
  2.   <div>
  3.     <!-- 系统 Logo -->
  4.     <el-aside class="header-logo" :width="asideWidth">
  5.       <div @click="$router.push({ name: 'Home' })">
  6.         <a v-if="foldAside">CMS管理系统</a>
  7.         <a v-else>CMS</a>
  8.       </div>
  9.     </el-aside>
  10.     <el-aside class="aside" :width="asideWidth" :class="'icon-size-' + iconSize">
  11.       <el-scrollbar style="height: 100%; width: 100%;">
  12.         <!--
  13.             default-active 表示当前选中的菜单，默认为 home。
  14.             collapse 表示是否折叠菜单，仅 mode 为 vertical（默认）可用。
  15.             collapseTransition 表示是否开启折叠动画，默认为 true。
  16.             background-color 表示背景颜色。
  17.             text-color 表示字体颜色。
  18.         -->
  19.         <el-menu :default-active="menuActiveName || 'home'" :collapse="!foldAside" :collapseTransition="false" background-color="#263238" text-color="#8a979e">
  20.           <el-menu-item index="home" @click="$router.push({ name: 'Home' })" style="width:200px">
  21.             <i class="el-icon-s-home"></i>
  22.             <span slot="title">栏目管理</span>
  23.           </el-menu-item>
  24.           
  25.           <el-submenu index="demo" style="width:200px">
  26.             <template slot="title">
  27.               <i class="el-icon-star-off"></i>
  28.               <span>demo</span>
  29.             </template>
  30.             <el-menu-item index="demo-echarts" @click="$router.push({ name: 'Echarts' })">
  31.               <i class="el-icon-s-data"></i>
  32.               <span slot="title">echarts</span>
  33.             </el-menu-item>
  34.             <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'Ueditor' })">
  35.               <i class="el-icon-document"></i>
  36.               <span slot="title">ueditor</span>
  37.             </el-menu-item>
  38.           </el-submenu>
  39.         </el-menu>
  40.       </el-scrollbar>
  41.     </el-aside>
  42.   </div>
  43. </template>
  44.  
  45. <script>
  46. export default {
  47.   name: 'Aside',
  48.   data() {
  49.     return {
  50.       foldAside: true,
  51.       // 保存当前选中的菜单
  52.       menuActiveName: 'home',
  53.       // 保存当前侧边栏的宽度
  54.       asideWidth: '200px',
  55.       // 用于拼接当前图标的 class 样式
  56.       iconSize: 'true',
  57.     };
  58.   },
  59. };
  60. </script>
  61.  
  62. <style>
  63. .aside {
  64.   margin-bottom: 0;
  65.   height: 100%;
  66.   max-height: calc(100% - 50px);
  67.   width: 100%;
  68.   max-width: 200px;
  69.   background-color: #263238;
  70.   text-align: left;
  71.   right: 0;
  72. }
  73.  
  74. .header-logo {
  75.   background-color: #17b3a3;
  76.   text-align: center;
  77.   height: 50px;
  78.   line-height: 50px;
  79.   width: 200px;
  80.   font-size: 24px;
  81.   color: #fff;
  82.   font-weight: bold;
  83.   margin-bottom: 0;
  84.   cursor: pointer;
  85. }
  86. .el-submenu .el-menu-item {
  87.   max-width: 200px !important;
  88. }
  89. .el-scrollbar__wrap {
  90.   overflow-x: hidden !important;
  91. }
  92. .icon-size-false i {
  93.   font-size: 30px !important;
  94. }
  95. .icon-size-true i {
  96.   font-size: 18px !important;
  97. }
  98. </style>

5》footer.vue

（1）简介
　　底部版权信息

（2）页面(路径地址：/src/components/common/footer.vue)

  1. <template>
  2.   <div class="my_footer">Copyright © {{ startYear }}-{{ endYear }} GoldSunny 版权所有</div>
  3. </template>
  4. <script>
  5. export default {
  6.   name: 'Footer',
  7.   data() {
  8.     return {
  9.       startYear: new Date().getFullYear(),
  10.       endYear: new Date().getFullYear() + 1,
  11.     };
  12.   },
  13. };
  14. </script>
  15. <style scoped>
  16. .my_footer {
  17.   background: #eee;
  18.   color: #666;
  19.   font-size: 14px;
  20.   line-height: 36px;
  21. }
  22. </style>

6》content.vue

（1）简介
　　内容区域

（2）页面(路径地址：/src/components/common/content.vue)

  1. <template>
  2.   <el-main class="content">
  3.     <keep-alive>
  4.       <router-view />
  5.     </keep-alive>
  6.   </el-main>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11.   name: 'Content',
  12. };
  13. </script>
  14.  
  15. <style>
  16. .el-main {
  17.   padding: 15px !important;
  18. }
  19. .content {
  20.   background-color: #fff;
  21. }
  22. </style>

7》修改路由

  1. routes: [{
  2.       path: "/",
  3.       name: "Home",
  4.       component: Home,
  5.       children: [{
  6.         path: "/about",
  7.         name: "about",
  8.         // route level code-splitting
  9.         // this generates a separate chunk (about.[hash].js) for this route
  10.         // which is lazy-loaded when the route is visited.
  11.         component: () =>
  12.           import( /* webpackChunkName: "about" */ "./views/About.vue")
  13.       }, ]
  14.     },

8》最终页面样式

二、路由整理

（1）简介
　　想要各个组件页面间能够顺利跳转，就需要 router 来操作了。
　　此处简单写了路由跳转规则，后续会进行修改。

（2）定义路由跳转规则
　　path 指的是 路径。
　　redirect 指的是 需要跳转的路径。
　　name 指的是 路由的名字（此项目中，均使用 name 进行路由跳转）。
　　component 指的是 路由的组件，用于显示页面（<router-view /> 会加载组件）。
　　children 指的是 子路由（路由中显示另一个路由）。

  1. import Vue from "vue";
  2. import Router from "vue-router";
  3. import Home from "./views/Home.vue";
  4.  
  5. Vue.use(Router);
  6.  
  7. const routes = [{
  8.     path: "/",
  9.     name: "Home",
  10.     component: Home,
  11.     children: [{
  12.       path: "/about",
  13.       name: "About",
  14.       meta: {
  15.         name: '关于我们'
  16.       },
  17.       component: () =>
  18.         import( /* webpackChunkName: "about" */ "./views/About.vue")
  19.     }, ]
  20.   },
  21.   {
  22.     path: "/404",
  23.     name: "404",
  24.     component: () => import("./views/404.vue")
  25.   },
  26.   {
  27.     path: "/login",
  28.     name: "Login",
  29.     component: () => import("./views/login.vue")
  30.   }
  31. ]
  32.  
  33. const router = new Router({
  34.   routes, // 用于定义 路由跳转 规则
  35.   mode: "history", // mode 用于去除地址中的 #
  36.   base: process.env.BASE_URL,
  37.   scrollBehavior: () => ({ // scrollBehavior 用于定义路由切换时，页面滚动。
  38.     y: 0
  39.   })
  40. });
  41. // 解决相同路径跳转报错
  42. const originalPush = Router.prototype.push
  43. Router.prototype.push = function push(location) {
  44.   return originalPush.call(this, location).catch(err => {
  45.     err
  46.   })
  47. }
  48. export default router

页面展示

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/113498
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号