您现在的位置是：首页 >技术教程 >2.10/2025 学习vue日记录网站首页技术教程

2.10/2025 学习vue日记录

Flamingo_huohuo 2025-08-14 12:01:04
简介2.10/2025 学习vue日记录

分析时间和进度安排

总原则--有抓有放,进度优先,兼顾效果

计划

上午4小时

下午4小时

晚上3小时

那么1小时4个视频

44*3=132个视频

总任务还有128个视频

2.10/2025 学习vue日记录
时间视频内容概要思维导图
10:081.登录成功跳转至首页_哔哩哔哩_bilibili登录页的跳转逻辑,重点提示前一步的调用vuex里面的loginAction前面应该加上await.然后进行业务跳转
11:20

2.复习路由守卫和permission.js的作用_哔哩哔哩_bilibili

3.路由守卫-跳转限制_哔哩哔哩_bilibili

4.优化白名单_哔哩哔哩_bilibili

路由导航守卫,关注新写法,单独的文件,流程图,白名单
12:21     5.路由守卫-进度条_哔哩哔哩_bilibili路由守卫中加入进度条的效果,使用NProgress.start done
13:176.主页样式-左侧导航_哔哩哔哩_bilibili重点分析layout/index.vue相关的文件结构和关系
15:216.主页样式-左侧导航_哔哩哔哩_bilibili妈呀,修改样式累死人了,关键是要找到在哪里定义的样式
17:03

7.主页样式-头部内容布局和样式_哔哩哔哩_bilibili

8.主页样式-右侧菜单设置_哔哩哔哩_bilibili

9.上午小结_哔哩哔哩_bilibili

终于将样式设计完成了,整体没什么难度,就是需要磨一下,svg样式的需要修改,下拉菜单的内容修改一下,头像的图片先写死
20:16

10.主页-显示用户名-分析_哔哩哔哩_bilibili

11.主页-显示用户名-数据获取_哔哩哔哩_bilibili

12.主页-显示用户名-数据渲染_哔哩哔哩_bilibili

13.主页-获取用户头像并渲染_哔哩哔哩_bilibili

14.使用getters优化访问_哔哩哔哩_bilibili

在导航守卫中发请求,拿到结果之后才跳转页面,并且存到vuex里面.

使用vuex里面的userInfo来渲染头像和用户名,使用全局getters来优化获取数据的代码

21:3815.退出登录_哔哩哔哩_bilibili复习了退出功能的逻辑,记得退出前有有弹框确认,退出后有信息提示

总结:

2.10日,周一一共学习了有11个小时,结果是学完了B站的15个视频,实现了登录页的登录逻辑,路由跳转的限制和进度条,主页左侧菜单栏和头部导航栏的样式定制,头部的头像和用户名信息的获取和渲染,以及退出登录的功能实现

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐