从零开始学vue3-首页布局及子页面初始化（3）

项目工具

yarn+vite5+vue3+ts+pinia+element-plus

效果图

首页布局

首页整体采用左右布局，左侧：标题和菜单导航，后侧采用上下布局，上侧：菜单导航，下侧：内容区域，路径src/views/Index.vue

<template>
  <div class="index">
    <div class="left">
      <h2>从零开始学Vue3</h2>
      <el-menu
        router
        active-text-color="#ffd04b"
        background-color="#38A6FA"
        default-active="2"
        text-color="#fff">
        <el-sub-menu index="1">
          <template #title>
            <el-icon><User /></el-icon>
            <span>账户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/role">
              <el-icon><CameraFilled /></el-icon>
              角色管理
            </el-menu-item>
            <el-menu-item index="/user">
              <el-icon><Avatar /></el-icon>
              用户管理
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/menu">
              <el-icon><Menu /></el-icon>
              菜单管理
            </el-menu-item>
            <el-menu-item index="/dictionary">
              <el-icon><Promotion /></el-icon>
              字典管理
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="right">
      <div class="top">
        <el-menu
          router
          :ellipsis="false"
          mode="horizontal"
          background-color="#1492f1"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="/index">
            <el-icon><HomeFilled /></el-icon>
            首页
          </el-menu-item>
          <el-menu-item index="/message">
            <el-icon><Message /></el-icon>
            消息
          </el-menu-item>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><UserFilled /></el-icon>
              管理员
            </template>
            <el-menu-item index="/mine">
              <el-icon><InfoFilled /></el-icon>
              个人中心
            </el-menu-item>
            <el-menu-item index="/setpwd">
              <el-icon><Position /></el-icon>
              修改密码
            </el-menu-item>
            <el-menu-item index="" @click="Logout">
              <el-icon><CircleClose /></el-icon>
              退出登录
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

CSS样式

<style scoped lang="scss">
.index {
  width: 100vw;
  height: 100vh;
  display: flex;
  .left {
    width: 200px;
    background: #38A6FA;
    h2 {
      height: 60px;
      line-height: 60px;
      font-size: 22px;
      font-family: aliph;
      text-align: center;
    }
    .el-menu {
      border-right: none;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .top {
      height: 60px;
      display: flex;
      justify-content: flex-end;
      background-color: #1492f1;
      .el-menu {
        border-bottom: none;
      }
    }
    .content {
      padding: 5px;
    }
  }
}
</style>

创建子页面

根据菜单信息，创建子页面

Home页面（首页展示页面），路径src/views/Home.vue

<template>
  <div>
    首页
  </div>
</template>

消息页面，路径src/views/Message.vue

<template>
  <div>
    消息页面
  </div>
</template>

依次创建其他子页面

个人中心页面，路径src/views/user/Mine.vue

修改密码页面，路径src/views/user/SetPwd.vue

角色管理页面，路径src/views/user/Role.vue

用户管理页面，路径src/views/user/User.vue

菜单管理页面，路径src/views/system/Menu.vue

字段管理页面，路径src/views/system/Dictionary.vue

路由信息调整

将各个子页面路由注册到路由中，路径src/router/index.ts

...
const routes = [
  {
    path: '/',
    name: 'login',
    component: () => import("../views/Login.vue")
  },{
    path: '/login',
    redirect: '/'
  },{
    path: '/index',
    name: 'index',
    component: () => import("../views/Index.vue"),
    children: [
      {
        path: '',
        name: 'home',
        meta: {title:'首页'},
        component: () => import("../views/Home.vue")
      },
      {
        path: '/message',
        name: 'message',
        meta: {title:'消息'},
        component: () => import("../views/Message.vue")
      },
      {
        path: '/mine',
        name: 'mine',
        meta: {title:'个人中心'},
        component: () => import("../views/user/Mine.vue")
      },
      {
        path: '/setpwd',
        name: 'setpwd',
        meta: {title:'修改密码'},
        component: () => import("../views/user/SetPwd.vue")
      },
      {
        path: '/role',
        name: 'role',
        meta: {title:'角色管理'},
        component: () => import("../views/user/Role.vue")
      },
      {
        path: '/user',
        name: 'user',
        meta: {title:'用户管理'},
        component: () => import("../views/user/User.vue")
      },
      {
        path: '/menu',
        name: 'menu',
        meta: {title:'菜单管理'},
        component: () => import("../views/system/Menu.vue")
      },
      {
        path: '/dictionary',
        name: 'dictionary',
        meta: {title:'字典管理'},
        component: () => import("../views/system/Dictionary.vue")
      }
    ]
  }
]
...

启动运行

未完待续，继续搬砖