企业对Vue技术的要求越来越高,但掌握vue3.0高深技术的人才却很少。
本课程将通过编写出一个真实的,高度还原QQ音乐播放器的复杂前端项目,让你在实战中获得一线大厂vue3.0高级技术实际开发经验,助你在面试中脱颖而出。
课程目录:
第1章课程简介试看
共3节(17分钟)收起列表
1-1课程导学(14:16)试看
1-2课程实用指南
1-3课前必读(源码获取方式)(02:16)
第2章项目初始化和推荐页面开发试看
本章从项目的初始化开始,介绍了项目是如何初始化的,然后带你编写页面的基础骨架,初始化基础路由。随后教你如何注册后端接口路由来获取数据,带你开发轮播图组件、基础滚动组件以及自定义指令v-loading。
共12节(123分钟)收起列表
2-1使用脚手架工具创建项目(06:47)
2-2脚手架生成代码介绍(10:15)
2-3项目基础代码编写(14:33)
2-4Tab组件实现(08:02)试看
2-5获取轮播图接口数据(13:50)
2-6作业节
2-7轮播图组件的开发(17:50)试看
2-8轮播图组件的使用(05:57)
2-9歌单列表实现&滚动组件的封装(15:28)
2-10图片懒加载的实现(05:00)
2-11v-loading自定义指令的开发(14:16)
2-12v-loading自定义指令的优化(10:03)
第3章歌手页面开发
本章会带你开发歌手页面,从获取歌手列表数据开始,编写IndexList索引列表组件,并实现列表固定标题和列表快速导航入口的功能。
共10节(74分钟)收起列表
3-1歌手列表数据获取(08:31)
3-2IndexList组件基础滚动功能实现(06:20)
3-3歌手列表固定标题实现(上)(17:47)
3-4作业节
3-5歌手列表固定标题实现(中)(07:15)
3-6歌手列表固定标题实现(下)(05:22)
3-7歌手列表快速导航入口实现(01)(05:58)
3-8歌手列表快速导航入口实现(02)(09:06)
3-9歌手列表快速导航入口实现(03)(07:44)
3-10歌手列表快速导航入口实现(04)(05:41)
第4章歌手详情页开发
本章会带你开发歌手详情页面,从获取歌曲列表数据和歌曲url开始,编写MusicList组件展示歌手详情,并且实现滚动交互、路由过渡动画效果。带你初次体验Vuex的应用,设计Vuex的数据。
共11节(130分钟)收起列表
4-1歌手详情页歌曲列表数据获取(12:42)
4-2歌手详情页批量获取歌曲url(11:38)
4-3歌手详情页MusicList组件基础代码编写(06:25)
4-4歌手详情页MusicList组件功能交互优化(01)(07:05)
4-5歌手详情页MusicList组件功能交互优化(02)(10:53)
4-6歌手详情页MusicList组件功能交互优化(03)(07:47)
4-7歌手详情页支持详情页刷新(14:08)
4-8歌手详情页路由过渡效果实现(07:16)
4-9歌手详情页边界情况处理(16:39)
4-10歌手详情页歌曲列表点击以及vuex的应用(23:14)
4-11歌手详情页歌曲列表实现随机播放(12:05)
第5章播放器内核组件开发
本章会带你开发最核心的播放器组件,包括播放器的基础样式和歌曲播放功能开发、前进后退、暂停、播放模式切换等逻辑开发、歌曲收藏功能开发。然后带你开发进度组件、歌词相关逻辑、cd唱片旋转逻辑、手指交互逻辑。接着带你开发mini播放器、圆形进度条组件,实现全屏切换过渡效果、左右滑动切换歌曲等功能。最后教你开...
共20节(282分钟)收起列表
5-1播放器基础样式及歌曲播放功能开发(15:33)
5-2播放器播放按钮的暂停与播放逻辑开发(06:37)
5-3播放器歌曲前进与后退逻辑开发(08:42)
5-4播放器DOM异常错误处理(10:40)
5-5播放器歌曲播放模式相关逻辑开发(22:30)
5-6播放器歌曲收藏功能相关逻辑开发(1)(15:02)
5-7播放器歌曲收藏功能相关逻辑开发(2)(14:00)
5-8播放器进度条相关逻辑开发(16:24)
5-9播放器cd唱片旋转相关逻辑开发(15:52)
5-10播放器歌词相关逻辑开发(01)(19:57)
5-11播放器歌词相关逻辑开发(02)(25:25)
5-12播放器歌词相关逻辑开发(03)(07:17)
5-13播放器中间视图层手指交互相关逻辑开发(上)(21:00)
5-14播放器中间视图层手指交互相关逻辑开发(下)(06:23)
5-15播放器mini播放器开发(01)(09:42)
5-16播放器mini播放器开发(02)(09:59)
5-17播放器mini播放器开发(03)(08:22)
5-18播放器mini播放器开发(04)(19:59)
5-19播放器全屏切换过渡效果实现(上)(23:24)
5-20播放器全屏切换过渡效果实现(下)(04:23)
第6章歌单详情页与排行榜页面开发
本章会带你开发歌单详情页和排行榜页面,教你如何在相似功能中实现组件的复用和进一步的抽象。
第7章搜索页面开发
本章会带你开发搜索页面,包括搜索框组件的开发、热门搜索模块的开发、Suggest组件开发、搜素历史功能的开发,让你学会移动端常见的上拉加载的交互实现,以及更多的交互细节和边界情况的处理。
第8章添加歌曲与用户中心页面开发
本章会带你开发添加歌曲到列表功能以及用户中心页面功能,进一步完善页面的功能,至此,音乐播放器全部功能开发完毕。
第9章性能优化与项目部署
本章会带你对项目做性能分析,并做一定的性能优化,包括KeepAlive组件的应用和路由组件的异步加载。
第10章课程总结
本章作为课程的最后一章,会提供一些后续的学习建议,在课程问答区老师等着与你进一步交流。
Vue3.0高阶实战:开发高质量音乐Web app 已经发布!
下载地址: Vue3.0高阶实战:开发高质量音乐Web app 网盘下载 (出处: IT直通车)
|