直接 cv 笔记中静态页面
菜单组件:
认识了解 el-menu整个菜单组件,el-menu-item菜单项,el-sub-menu多级菜单的标题,el-menu-item各个展开内容。也就是一级直接 el-menu-item,如果下面还有分类,就是 el-sub-menu
首页架子主要是左右两个部分,左边 aside ,右边 container,右侧又分为上下。
登录访问拦截:
也就是首页内容必须是登陆过的才能访问,未登录自然不能访问。
在router的 index.js进行访问拦截
可以直接在官网 vue-router 中找到导航守卫
用户基本信息获取和渲染
封装接口
因为是要存储到 pinia 中,所以要在 stores文件夹中的 user.js模块中 新建一个对象用来管理个人信息
调用 pinia中 useUserStore,使用其中的 getUser 方法得到
渲染昵称和头像,有昵称用昵称,没有昵称直接用账户名;有头像图片用头像图片,没有直接用默认的
该下拉菜单中前三个是一个导航跳转,点击即可跳到左边的个人中心下面内容
el组件中是 Dropdown 下拉菜单
在 el-dropdown 中,通常通过 @command 事件来处理 菜单项的点击事件,每个 el-dropdown-item会设置一个command属性,该属性值会在点击菜单项目时作为事件的参数传递给父组件的的事件处理函数
在 pinia 中设置清除个人信息函数,然后调用
加个消息弹出框,防止误点直接退出了
要在 eslintrc.cjs中配置 ElMessageBox 才不会报错