Vue3.0高阶实战：开发高质量音乐Web app

第1章课程简介 3 节 | 17分钟

课程简介

1-1 课程导学 (14:16)

1-2 课程实用指南

1-3 课前必读（源码获取方式） (02:16)

第2章项目初始化和推荐页面开发 12 节 | 123分钟

本章从项目的初始化开始，介绍了项目是如何初始化的，然后带你编写页面的基础骨架，初始化基础路由。随后教你如何注册后端接口路由来获取数据，带你开发轮播图组件、基础滚动组件以及自定义指令 v-loading。

2-1 使用脚手架工具创建项目 (06:47)

2-2 脚手架生成代码介绍 (10:15)

2-3 项目基础代码编写 (14:33)

2-4 Tab组件实现 (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-11 v-loading 自定义指令的开发 (14:16)

2-12 v-loading 自定义指令的优化 (10:03)

第3章歌手页面开发10 节 | 74分钟

本章会带你开发歌手页面，从获取歌手列表数据开始，编写 IndexList 索引列表组件，并实现列表固定标题和列表快速导航入口的功能。

3-1 歌手列表数据获取 (08:31)

3-2 IndexList 组件基础滚动功能实现 (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章歌手详情页开发11 节 | 130分钟

本章会带你开发歌手详情页面，从获取歌曲列表数据和歌曲 url 开始，编写 MusicList 组件展示歌手详情，并且实现滚动交互、路由过渡动画效果。带你初次体验 Vuex 的应用，设计 Vuex 的数据。

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章播放器内核组件开发28 节 | 411分钟

本章会带你开发最核心的播放器组件，包括播放器的基础样式和歌曲播放功能开发、前进后退、暂停、播放模式切换等逻辑开发、歌曲收藏功能开发。然后带你开发进度组件、歌词相关逻辑、cd 唱片旋转逻辑、手指交互逻辑。接着带你开发 mini 播放器、圆形进度条组件，实现全屏切换过渡效果、左右滑动切换歌曲等功能。最后教你开…

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 播放器进度条相关逻辑开发（下） (26:28)

5-10 播放器 cd 唱片旋转相关逻辑开发 (15:52)

5-11 播放器歌词相关逻辑开发（01） (19:57)

5-12 播放器歌词相关逻辑开发（02） (25:25)