[vue3] 使用ElementPlus页面布局搭建架子

✨✨博主简介:一个会bbox的‍

✨✨个人主页:沫洺的主页

 系列专栏:  JavaWeb专栏 JavaSE专栏  Java基础专栏vue3专栏

如果文章对你有所帮助请留下三连✨✨

前言

实现如下效果图需要结合vue3专栏从第一篇文章到此文章的准备工作

前期准备,在模拟接口中多写一些信息,单纯为了好看,可以忽略

饿了么Plus:网址

Fast Mock:网址

效果图

先看效果图

实现内容

• ElementPuls页面布局(本章)
• 动态菜单显示(本章)
• 实现菜单折叠效果(下一章)
• 实现部分页面不适用整体框架(下一章)
• 统一页面导航标签(下一章)

ElementPuls页面布局

  

    
      Header
      
        Aside
        Main
      
    
  

使用上图布局容器,复制代码到App.vue中,可将原来的代码注释

布局就是下图所示的布局,因为没有样式,所以大概就是所画的这个样子

 接下来给Header设置Layout 布局和样式

将代码加到Header位置,为了直观的看到效果,随便写一些内容

原理就是将页面竖着切成24份,4/16/4分为三部分 

接下来添加样式,首先是背景颜色,内容居中,然后在第一部分,加个logo,第二部分写某某系统,第三部分整个下拉框

新建添加一个logo图片public/images/logo.png,在第一部分引入logo,并设置大小,可以去网上扒一个logo图片

改第一部分 

 改第二部分

改第三部分

添加一个下拉菜单

代码我做了一些修改,可参考一下

            
              
                游客
                
                  
                
              
              
            

.userinfo {
  text-align: right;
}

.el-dropdown-link {
  color: white;
}

到这里Header部分完事

接下来整Aside部分

动态菜单显示

这里需要整一个Menu菜单

同样的代码我做了一些改动,可参考 

          
            
              
              二级菜单
              二级菜单
            
            
              
                
              
              普通菜单
            
          

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

Aside部分添加的Menu菜单作为一个组件,可以抽成一个独立的vue页面,然后只需要在Aside中引用即可

新建components/Menu.vue

注意路径使用了别名@(前面文章提过)

然后给它加个背景颜色

接下来解决menu菜单代码写死的问题

准备工作,新建vues/order/Index.vue,List.vue,Add.vue

添加路由

 关联router

 开启router属性,默认开启首页路径对应,循环遍历

设置关联属性

 

import { createRouter, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/home',
        name: 'home',
        component: () => import("@/views/Home.vue"),
        meta: { title: "首页" }
    },
    {
        path: '/poduct',
        name: 'poduct',
        component: () => import("@/views/poduct/Index.vue"),
        meta: { title: "商品管理" },
        children: [
            {
                path: '/poduct/list',
                name: 'poduct-list',
                component: () => import("@/views/poduct/List.vue"),
                meta: { title: "商品列表" }
            },
            {
                path: '/poduct/add',
                name: 'poduct-add',
                component: () => import("@/views/poduct/Add.vue"),
                meta: { title: "添加商品" }
            }
        ]
    },
    {
        path: '/editor',
        name: 'editor',
        component: () => import("@/views/Editor.vue"),
        meta: { title: "富文本" }
    },
    {
        path: '/order',
        name: 'order',
        component: () => import("@/views/order/Index.vue"),
        meta: { title: "订单管理" },
        children: [
            {
                path: '/order/list',
                name: 'order-list',
                component: () => import("@/views/order/List.vue"),
                meta: { title: "订单列表" }
            },
            {
                path: '/order/add',
                name: 'order-add',
                component: () => import("@/views/order/Add.vue"),
                meta: { title: "添加订单" }
            }
        ]
    },
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

启用关联 :router="true"

 分情况进行遍历

 添加唯一标识

 

那么为什么要加唯一标识呢?

如果不加唯一标识,当你点击任意一个一级菜单,由于没有区别,就会默认将所有的一级菜单,当成一部分进行响应,有点牵一发而动全身的感觉,同理二级菜单也是,所有通过添加唯一标识就可以避免此问题,以为每一个菜单都设置了自己的path或者name属性,通过path和name就可以进行区分.

添加图标

 可自定义

 动态设置图标(可做可不做,仅供参考)

在router中添加一个icon属性

最后设置Main部分

要实现的效果就是我们点击Aside部分中的菜单,在Main部分显示出来

只需要改一个地方即可

 然后会出现一个bug,就是当你点击二级菜单后再次点击普通菜单时会出现找不到路径的问题

解决办法(什么原因,我也不知道)

 之后就可以自由切换餐单了

总结说明

内容比较杂,需要结合之前的vue3文章,很多细节的地方在图片中都有相关的说明解释,这一篇主要解决了ElementPuls页面布局,动态菜单显示这俩部分,其他部分放到下一篇