vue3.0高阶实战-开发音乐webapp-慕课网

这绝对是一门值得你反复刷三遍的高质量Vue进阶课程

全网稀缺的Vue3深度应用教学，技能、思想、能力、经验四项全面提升

深度掌握2021前端最优技术栈

从项目需求分析到组件开发，体验完整项目开发流程，掌握Web App开发技巧与方案

提高项目质量和可维护性

能自主开发组件库，将模块化思想直接应用于工作实际，工作效率直线提高

掌握Vue3全家桶高阶技巧以及JS、CSS动画开发

酷炫动画、流畅交互，高度还原原生产品体验，Vue3 高级知识点全面掌握

完成一个真实的线上音乐Web App

收获高级项目独立开发能力，进阶成为大厂高薪招募的稀缺人才

从基础组件到业务组件，一站式掌握组件化开发思想

10个真实线上接口，体验实际开发场景，循序渐进地开发自己的项目组件

9 个基础组件：

Confirm：对话框确认组件、Loading：加载状态组件、Message：消息组件
NoResult：无结果组件、Scroll：基础滚动组件、SearchList：搜索列表组件
Slider：轮播图组件、SongList：歌曲列表组件、Switches：导航栏切换组件

13个业务组件：

AddSong：添加歌曲组件、Header：头部组件、IndexList：索引列表组件
MusicList：歌曲业务组件、MiniPlayer：迷你播放器组件、Player：播放器组件
Playlist：播放列表组件、ProgressBar：条形进度组件
ProgressCircle：圆形进度组件、SearchInput：搜索框组件
Suggest：搜素推荐组件、Tab：导航栏组件、WrapScroll：业务滚动组件

10 个线上真实接口模块：

推荐列表接口、歌手列表接口、歌手详情接口、歌曲 url 获取接口、歌词接口、歌单专辑接口、排行榜接口、排行榜详情接口、热门搜索接口、搜索查询接口

8 个视图组件：

Album：专辑详情页面组件、Recommend：推荐页面组件
Search：搜索页面组件、Singer：歌手页面组件
SingerDetail：歌手详情页面组件、TopList：排行榜页面组件
TopDetail：排行榜详情页面组件、UserCenter：用户中心页面组件

6 个 JS 模块：

array-store：数组类型数据本地存储辅助模块、constant：常量数据模块
create-detail-component：创建通用详情页组件模块
create-loading-like-directive：创建类似 loading 效果的自定义指令模块
dom：DOM 操作辅助模块
util：工具库模块

实战高性能音乐播放器，高度还原产品体验，媲美原生

酷炫动画、完美交互、功能完善

扫描二维码
体验完整功能

推荐页面

专辑页面

播放器

搜索页面

榜单详情页面

7大核心技术栈，轻松构建完整vue3高阶知识体系

深层次掌握 Vue3 核心技术栈

Vue.js 3.0

1.组件化开发
2.自定义指令
3.高阶组件
4.Options API
5.Composition API

Vuex

1.全局状态管理
2.与本地存储的配合

VueRouter

1.路由视图配置
2.路由过渡交互动画

性能优化

1.KeepAlive 组件实现缓存
2.异步路由实现按需加载

接口通讯

1.后端代理路由
2.数据的转换与处理

Composition API

1.滚动组件：useScroll
2.轮播图组件：useSlider
3.索引列表组件：useFixed/useShortcut
4.播放器相关组件：useAnimation/useCd/useFavorite/useLyric/
useMiddleInteractive/useMiniSlider/useMode/usePlayHistory
5.搜索相关组件：usePullupLoad，useSearchHistory

第三方库

1.better-scroll 滚动插件
2.vue3-lazy 图片懒加载插件
3.good-storage 本地存储插件
4.lyric-parser 歌词解析插件
5.create-keyframe-animation 动态创建 Animation 插件
6.throttle-debounce 截流防抖工具插件

课程大纲

第1章导入篇：项目初始化和推荐页面开发

第2章歌手页面开发

第3章歌手详情页开发

第4章播放器内核组件开发

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

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

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

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

查看完整目录

每个慕课网课程，都是一个专业的技术社区

个性化增值服务，学习有保障更高效

答疑专区+技术社区

连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。

学练一体

课程不仅包括视频讲解，还提供相关
练习、巩固学习效果的环节。

源码开放

课程案例代码完全开放给你，你可以根
据所学知识，自行修改、优化

教辅材料

丰富的教辅材料实时上传

适合人群

一年以上工作经验的前端从业人员
有一定 Vue与 js 基础，且渴望进阶的前端工程师

技术储备要求

熟习HTML、 CSS和JavaScript编程有一定Vue基础和Vue
实际开发经验已经具备Node.js、npm和webpac的使用经验

技术参数

Vue3.0
webpack 4.x @vue/cli 4.5.9

向您推荐

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

￥448.00

高级难度 / 2030 人在学

扫码学习

如无法下载使用图片另存为

下载海报

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

慕课网明星讲师黄轶，深度讲解 Vue3.0 ，提升的不止是Vue代码能力，还有你的核心竞争力

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

讲师其他课程

课程预览

这绝对是一门值得你反复刷三遍的高质量Vue进阶课程

全网稀缺的Vue3深度应用教学，技能、思想、能力、经验四项全面提升

明星讲师+火热技术+深度复杂项目，一封通往高级前端工程师的邀请函

罕见的Vue3.0高阶实战课：实现技术和薪资的双飞越

从基础组件到业务组件，一站式掌握组件化开发思想

10个真实线上接口，体验实际开发场景，循序渐进地开发自己的项目组件

实战高性能音乐播放器，高度还原产品体验，媲美原生

酷炫动画、完美交互、功能完善

7大核心技术栈，轻松构建完整vue3高阶知识体系

深层次掌握 Vue3 核心技术栈

每个慕课网课程，都是一个专业的技术社区

个性化增值服务，学习有保障更高效

热搜

最近搜索清空

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

慕课网明星讲师黄轶，深度讲解 Vue3.0 ，提升的不止是Vue代码能力，还有你的核心竞争力

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

讲师其他课程

课程预览

课程比较

这绝对是一门值得你反复刷三遍的高质量Vue进阶课程

全网稀缺的Vue3深度应用教学，技能、思想、能力、经验四项全面提升

明星讲师+火热技术+深度复杂项目，一封通往高级前端工程师的邀请函

罕见的Vue3.0高阶实战课：实现技术和薪资的双飞越

从基础组件到业务组件，一站式掌握组件化开发思想

10个真实线上接口，体验实际开发场景，循序渐进地开发自己的项目组件

实战高性能音乐播放器，高度还原产品体验，媲美原生

酷炫动画、完美交互、功能完善

7大核心技术栈，轻松构建完整vue3高阶知识体系

深层次掌握 Vue3 核心技术栈

每个慕课网课程，都是一个专业的技术社区

个性化增值服务，学习有保障更高效

相关推荐

邀请好友学习

微信邀请

链接邀请

海报邀请

￥448.00

学习咨询