/ 实战 / Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码
收藏

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

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

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

限时优惠
¥388.00
原价¥448.00
难度 高级 时长 17小时 8分钟 学习人数 1138 综合评分 10.00

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

限时优惠 ¥388.00

¥448.00

企业对Vue技术的要求越来越高,但掌握vue3.0高深技术的人才却很少。本课程将通过编写出一个真实的,高度还原音乐播放器的复杂前端项目,让你在实战中获得一线大厂vue3.0高级技术实际开发经验,助你在面试中脱颖而出。

ustbhuangyi
讲师

前端架构师

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
课程目标

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

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

01
深度掌握2021前端最优技术栈
从项目需求分析到组件开发,体验完整项目开发流程,掌握Web App开发技巧与方案
02
提高项目质量和可维护性
能自主开发组件库,将模块化思想直接应用于工作实际,工作效率直线提高
03
掌握Vue3全家桶高阶技巧以及JS、CSS动画开发
酷炫动画、流畅交互,高度还原原生产品体验,Vue3 高级知识点全面掌握
04
完成一个真实的线上音乐Web App
收获高级项目独立开发能力,进阶成为大厂高薪招募的稀缺人才
课程亮点

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

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

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

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
第三方库
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
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题