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

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

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

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

  "20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" />el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple" />el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" />el-col>
  

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

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

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

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

📍改第一部分 

"/images/logo.png" class="logo" alt="管理系统" />

 📍改第二部分

📍改第三部分

📍添加一个下拉菜单

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

            
              <span class="el-dropdown-link">
                <el-icon><UserFilled />el-icon>游客
                <el-icon class="el-icon--right">
                  <arrow-down />
                el-icon>
              span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>菜单一el-dropdown-item>
                  <el-dropdown-item>菜单二el-dropdown-item>
                  <el-dropdown-item>菜单三el-dropdown-item>
                  <el-dropdown-item divided>退出系统el-dropdown-item>
                el-dropdown-menu>
              template>
            

.userinfo {
  text-align: right;
}
 
.el-dropdown-link {
  color: white;
}

📍到这里Header部分完事

📍接下来整Aside部分

🍂动态菜单显示

📍这里需要整一个Menu菜单

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

          default-active="1" class="el-menu-vertical-demo">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                el-icon>
                <span>一级菜单span>
              template>
              <el-menu-item index="1-1">二级菜单el-menu-item>
              <el-menu-item index="1-2">二级菜单el-menu-item>
            el-sub-menu>
            <el-menu-item index="2">
              <el-icon>
                <icon-menu />
              el-icon>
              <span>普通菜单span>
            el-menu-item>
          

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就可以进行区分.

<script setup lang="ts">
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
script>
<style scoped>
.el {
    background-color: #b2b6b6;
}
style>
 

📍添加图标

📍 可自定义

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

📍在router中添加一个icon属性

📍最后设置Main部分

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

📍只需要改一个地方即可

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

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

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

🍂总结说明

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