【Vue3大事件 | 项目笔记】第三天

前言：Vue3大事件项目是一个基于Vue3的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学或巩固Vue3，希望本系列文章可以帮助到你。

【Vue3大事件 | 项目笔记】第三天

- 今日完结：
- 今日收获：
- - [1.用Element Plus搭建首页架子](#1.用Element Plus搭建首页架子)
  - 2.学会登录访问拦截
  - 3.下拉菜单跳转退出功能
  - 4.封装PageContainer组件
- 总结：

今日完结：

搭建首页layout架子
完成登录访问拦截
完成用户基本信息渲染和退出
封装文章分类架子
完成文章分类结构渲染

今日收获：

1.用Element Plus搭建首页架子

官网：Element Plus
布局类组件 ：
el-container/el-aside/el-header/el-main/el-footer ：

Element Plus 提供的布局容器组件，可快速搭建后台管理系统的经典布局（侧边栏 + 头部 + 主体 + 底部）；通过 el-container 嵌套子组件，结合样式可实现 100vh 全屏布局，无需手动编写复杂的 Flex/Grid 布局代码。
导航菜单类组件 ：
el-menu（菜单容器） ：

核心属性：background-color/text-color/active-text-color 快速配置菜单背景、默认文字、激活文字颜色；:default-active="$route.path"：绑定当前路由路径，实现菜单默认高亮（匹配路由的菜单项自动激活）；router 属性：开启后点击菜单项可自动跳转至 index 属性对应的路由路径，无需手动绑定点击事件。
el-menu-item（一级菜单项） ：

index 属性：设置路由路径（如 /article/channel），结合 el-menu 的 router 属性实现路由跳转；支持嵌套 el-icon 组件，快速为菜单项添加图标，提升交互体验。
el-sub-menu（折叠子菜单）：

需通过 #title 插槽自定义子菜单标题（可包含图标 + 文字）；

index 属性为子菜单唯一标识，内部嵌套 el-menu-item 实现多级菜单结构。

javascript 复制代码

<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#232323"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item index="/article/channel">
          <el-icon><Management /></el-icon>
          <span>文章分类</span>
        </el-menu-item>
        ...
        <el-sub-menu index="/user">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/user/profile">
            <el-icon><User /></el-icon>
            <span>基本资料</span>
          </el-menu-item>
         
        
        </el-sub-menu>
      </el-menu>
    </el-aside>
   ...
</template>

2.学会登录访问拦截

当用户没有进行登录时，我们不能让用户访问到内部的页面，这时我们就要用到访问拦截。

登录访问拦截 => 默认是直接放行的；根据返回值决定，是放行还是拦截

返回值：

1.undefined /true 直接放行

false 拦回 from 的地址页面

具体路径或路径对象拦截到对应的地址 '/login' {name: 'login'}

javascript 复制代码

router.beforeEach((to) => {
  const userStore = useUserStore()
  if (!userStore.token && to.path !== '/login') return '/login'
})

3.下拉菜单跳转退出功能

这个功能的具体实现也是用到了Element PIus 组件库，

通过下拉菜单用户可以选择跳转到那个页面，退出登录时跳转到登录页面，同时也会把用户信息清除。

1.注册点击事件
el-dropdown（下拉菜单容器）

下拉菜单根组件，控制弹出位置（placement），绑定 command 事件，接收子项 command 值区分操作，是下拉菜单的核心容器。
el-dropdown-menu（下拉列表容器）

嵌套在 el-dropdown 内，作为 el-dropdown-item 的父容器，规整下拉选项布局，封装统一的菜单列表样式。
el-dropdown-item（下拉菜单项）

单个下拉选项，通过 command 定义标识，icon 配置图标，点击时触发父组件 command 事件传递标识。

javascript 复制代码

// @command 是 Element Plus 中 el-dropdown 组件的核心事件，用于监听下拉菜单项的点击并接收菜单项的指令参数，实现 "点击不同下拉项触发不同业务逻辑" 的需求。
<el-dropdown placement="bottom-end" @command="onCommand">

<el-dropdown-menu>

  <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
  <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
  <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
  <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
</el-dropdown-menu>

2.添加退出功能

javascript 复制代码

const onCommand = async (command) => {
  if (command === 'logout') {
  // Element Plus 提供的模态确认弹窗功能
    await ElMessageBox.confirm('你确认退出大事件吗？', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    userStore.removeToken()
    userStore.setUser({})
    router.push(`/login`)
  } else {
    router.push(`/user/${command}`)
  }
}

4.封装PageContainer组件

当两个页面架子相同时，我们可以通过封装组件，来进行复用，这里同时用到了Element组件库和"父传子"的知识。

el-card组件：封装通用页面卡片容器，通过 title 展示标题，extra 插槽放右侧操作，默认插槽承载主体内容，统一页面卡片布局样式。

javascript 复制代码

<script setup>
defineProps({
  title: {
    required: true,
    type: String
  }
})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{{ title }}</span>
        <div class="extra">
          <slot name="extra"></slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>
...

总结：

今天依旧是用到了很多Element组件库里面的知识，感觉这个项目就是通过不断的用组件库，来完成页面，后续我要去官网好好了解这个组件库了，之后在写博客我也会减少对element组件库的说明（因为官网上都可以参看），多一写对具体功能实现的讲述。

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！