收藏

Vue2.0开发企业级移动端音乐Web App

全网稀缺的Vue.js高级应用实战教学

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

难度 高级 时长 20小时 学习人数 5432 综合评分 9.99

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

  • 第1章 课程内容介绍 试看 2 节 | 19分钟

    包括课程概述、课程安排、学习前提、讲授方式等方面的介绍,最后演示了整个音乐App的功能,让同学们对课程项目有一个直观的了解。

    收起列表

    • 视频: 1-1 导学 (16:31) 试看
    • 视频: 1-2 课前必读(源码获取方式) (02:16) 试看
  • 第2章 项目准备工作 试看 3 节 | 28分钟

    包括项目需求分析、脚手架初始化代码、项目目录介绍及图标字体、公共样式等资源的准备 。

    收起列表

    • 视频: 2-1 需求分析 (08:53) 试看
    • 视频: 2-2 Vue-cli脚手架安装 (06:19)
    • 视频: 2-3 项目目录介绍及图标字体、公共样式等资源准备 (12:23)
  • 第3章 页面骨架开发 2 节 | 17分钟

    包括页面入口、header 组件的编写、路由配置及顶导 tab 组件开发。

    收起列表

    • 视频: 3-1 页面入口+header 组件的编写 (06:54)
    • 视频: 3-2 路由配置+ tab 顶导组件开发 (09:58)
  • 第4章 推荐页面开发 13 节 | 137分钟

    包括 jsonp 原理介绍和 Promise 封装、轮播图组件开发、歌单接口数据分析和抓取、axios 介绍和后端接口代理、歌单列表组件开发和数据应用、scroll 组件的抽象和应用、vue-lazyloader 懒加载插件的介绍和应用、loading 基础组件开发和应用。...

    收起列表

    • 视频: 4-1 页面简介+轮播图数据分析 (02:45)
    • 视频: 4-2 jsonp原理介绍+Promise封装 (12:35)
    • 视频: 4-3 jsonp的应用+轮播图数据抓取 (13:43)
    • 视频: 4-4 轮播图组件实现(上) (27:05)
    • 视频: 4-5 轮播图组件实现(中) (10:28)
    • 视频: 4-6 轮播图组件实现(下) (07:38)
    • 视频: 4-7 歌单数据接口分析 (08:52)
    • 视频: 4-8 axios 介绍和后端接口代理 (14:46)
    • 视频: 4-9 歌单列表组件开发和数据的应用 (05:11)
    • 视频: 4-10 scroll 组件的抽象和应用(上) (12:22)
    • 视频: 4-11 scroll 组件的抽象和应用(下) (07:01)
    • 视频: 4-12 vue-lazyload 懒加载插件介绍和应用 (09:55)
    • 视频: 4-13 loading 基础组件的开发和应用 (04:30)
  • 第5章 歌手页面开发 10 节 | 115分钟

    包括歌手数据的抓取和处理、Singer 类的封装、类通讯录组件 listview开发和应用。

    收起列表

    • 视频: 5-1 歌手页面布局和设计讲解 (02:19)
    • 视频: 5-2 歌手数据接口抓取 (11:07)
    • 视频: 5-3 歌手数据处理和 Singer 类的封装 (19:06)
    • 视频: 5-4 listview 基础组件的开发和应用-滚动列表实现 (10:50)
    • 视频: 5-5 listview 基础组件的开发和应用-右侧快速入口实现(1) (22:05)
    • 视频: 5-6 listview 基础组件的开发和应用-右侧快速入口实现(2) (20:30)
    • 视频: 5-7 listview 基础组件的开发和应用-右侧快速入口实现(3) (05:26)
    • 视频: 5-8 listview 基础组件的开发和应用-右侧快速入口实现(4) (08:49)
    • 视频: 5-9 listview 基础组件的开发和应用-滚动固定标题实现(上) (04:45)
    • 视频: 5-10 listview 基础组件的开发和应用-滚动固定标题实现(下) (09:29)
  • 第6章 歌手详情页开发 14 节 | 118分钟

    包括子路由的配置及转场动画实现、Vuex 的介绍、Vuex 初始化歌手数据的配置、歌手详情页数据抓取和处理、Song 类的封装、music-list 组件开发。

    收起列表

    • 视频: 6-1 歌手详情页布局和设计详解 (01:51)
    • 视频: 6-2 子路由配置以及转场动画实现 (08:39)
    • 视频: 6-3 初识 Vuex (04:35)
    • 视频: 6-4 Vuex 初始化及歌手数据的配置 (20:41)
    • 视频: 6-5 歌手详情数据抓取 (08:19)
    • 视频: 6-6 歌手详情数据处理和Song类的封装(上) (17:08)
    • 视频: 6-7 歌手详情数据处理和Song类的封装(下) (02:17)
    • 视频: 6-8 music-list 组件开发(1) (06:52)
    • 视频: 6-9 music-list 组件开发(2) (09:20)
    • 视频: 6-10 music-list 组件开发(3) (10:30)
    • 视频: 6-11 music-list 组件开发(4) (05:20)
    • 视频: 6-12 music-list 组件开发(5) (07:04)
    • 视频: 6-13 music-list 组件开发(6) (07:23)
    • 视频: 6-14 music-list 组件开发(7) (06:58)
  • 第7章 播放器内置组件开发 25 节 | 295分钟

    包括播放器 Vuex 数据设计和相关应用、播放器基础样式及歌曲数据应用、 播放器展开收起动画的实现、播放器前进后退功能实现、播放器播放时间获取和更新、progress-bar 进度条组件开发、progress-circle 圆形进度条组件开发、播放器模式切换功能实现、播放器歌词数据抓取和解析、播放器歌词左右滑动的实现、播放器底部播...

    收起列表

    • 视频: 7-1 播放器页面设计详解 (03:25)
    • 视频: 7-2 播放器Vuex数据设计 (17:12)
    • 视频: 7-3 播放器Vuex的相关应用 (17:07)
    • 视频: 7-4 播放器基础样式及歌曲数据的应用 (06:58)
    • 视频: 7-5 播放器展开收起动画(上) (03:14)
    • 视频: 7-6 播放器展开收起动画(中) (15:28)
    • 视频: 7-7 播放器展开收起动画(下) (12:29)
    • 视频: 7-8 播放器歌曲播放功能实现 (15:47)
    • 视频: 7-9 播放器歌曲前进后退功能实现(上) (10:45)
    • 视频: 7-10 播放器歌曲前进后退功能实现(下) (04:39)
    • 视频: 7-11 播放器播放时间获取和更新 (08:48)
    • 视频: 7-12 播放器progress-bar进度条组件实现(上) (12:52)
    • 视频: 7-13 播放器progress-bar进度条组件实现(中) (16:30)
    • 视频: 7-14 播放器progress-bar进度条组件实现(下) (02:10)
    • 视频: 7-15 播放器progress-circle 圆形进度条组件实现 (16:19)
    • 视频: 7-16 播放器模式切换功能实现(上) (04:40)
    • 视频: 7-17 播放器模式切换功能实现(中) (11:22)
    • 视频: 7-18 播放器模式切换功能实现(下) (19:56)
    • 视频: 7-19 播放器歌词数据抓取 (14:52)
    • 视频: 7-20 播放器歌词数据解析 (10:53)
    • 视频: 7-21 播放器歌词滚动列表实现 (12:33)
    • 视频: 7-22 播放器歌词左右滑动实现(上) (12:52)
    • 视频: 7-23 播放器歌词左右滑动实现(下) (13:02)
    • 视频: 7-24 播放器歌词剩余功能实现 (13:52)
    • 视频: 7-25 播放器底部播放器适配+mixin的应用 (16:13)
  • 第8章 歌单页面开发 3 节 | 23分钟

    包括歌单页面的布局介绍、Vuex 实现路由数据通讯、歌单详情页数据抓取和处理。

    收起列表

    • 视频: 8-1 歌单详情页布局介绍及Vuex实现路由数据通讯 (09:12)
    • 视频: 8-2 歌单详情页数据抓取 (07:36)
    • 视频: 8-3 歌单详情页数据的处理和应用 (05:14)
  • 第9章 排行榜及详情页开发 5 节 | 43分钟

    包括排行榜布局介绍、排行榜数据抓取和应用、榜单详情页布局介绍、Vuex 实现路由数据通讯、榜单详情页数据抓取和应用。

    收起列表

    • 视频: 9-1 排行页面布局介绍及排行榜数据抓取 (07:35)
    • 视频: 9-2 排行页排行榜数据应用 (09:01)
    • 视频: 9-3 榜单详情页布局介绍及Vuex实现路由数据通讯 (07:52)
    • 视频: 9-4 榜单详情页数据抓取和应用 (11:19)
    • 视频: 9-5 带排行的song-list组件扩展和应用 (06:21)
  • 第10章 搜索页面开发 18 节 | 190分钟

    包括search-box 组件开发、热门搜索数据抓取和应用、suggest 组件开发、搜索结果保存功能实现、search-list 组件开发、confirm 组件开发。

    收起列表

    • 视频: 10-1 搜索页面页面布局和功能介绍 (02:09)
    • 视频: 10-2 搜索页面search-box组件开发 (07:52)
    • 视频: 10-3 搜索页面热门搜索数据抓取和应用 (09:02)
    • 视频: 10-4 搜索页面suggest组件开发(1) (25:58)
    • 视频: 10-5 搜索页面suggest组件开发(2) (23:53)
    • 视频: 10-6 搜索页面suggest组件开发(3) (12:15)
    • 视频: 10-7 搜索页面suggest组件开发(4) (03:29)
    • 视频: 10-8 搜索页面suggest组件开发(5) (05:03)
    • 视频: 10-9 搜索页面suggest组件开发(6) (06:11)
    • 视频: 10-10 搜索页面suggest组件开发(7) (18:32)
    • 视频: 10-11 搜索页面搜索结果保存功能实现(1) (06:11)
    • 视频: 10-12 搜索页面搜索结果保存功能实现(2) (13:29)
    • 视频: 10-13 搜索页面搜索结果保存功能实现(3) (05:22)
    • 视频: 10-14 搜索页面search-list 组件功能实现(上) (05:58)
    • 视频: 10-15 搜索页面search-list 组件功能实现(下) (16:45)
    • 视频: 10-16 搜索页面confirm 组件功能实现 (15:35)
    • 视频: 10-17 搜索页面剩余功能实现(上) (05:51)
    • 视频: 10-18 搜索页面剩余功能实现(下) (05:35)
  • 第11章 歌曲列表组件 17 节 | 134分钟

    包括歌曲列表组件的显示和隐藏控制、播放列表的实现、player mixin 的抽象、 add-song 组件开发、top-list 组件开发、scroll 组件能力的扩展

    收起列表

    • 视频: 11-1 歌曲列表组件布局和功能介绍 (04:38)
    • 视频: 11-2 歌曲列表组件显示和隐藏的控制 (04:23)
    • 视频: 11-3 歌曲列表组件播放列表的实现(1) (11:18)
    • 视频: 11-4 歌曲列表组件播放列表的实现(2) (06:18)
    • 视频: 11-5 歌曲列表组件播放列表的实现(3) (06:22)
    • 视频: 11-6 歌曲列表组件播放列表的实现(4) (07:08)
    • 视频: 11-7 歌曲列表组件播放列表的实现(5) (08:16)
    • 视频: 11-8 歌曲列表组件 playerMixin的抽象(上) (07:33)
    • 视频: 11-9 歌曲列表组件 playerMixin的抽象(下) (05:29)
    • 视频: 11-10 歌曲列表组件add-song组件实现(1) (05:20)
    • 视频: 11-11 歌曲列表组件add-song组件实现(2) (14:51)
    • 视频: 11-12 歌曲列表组件add-song组件实现(3) (07:52)
    • 视频: 11-13 歌曲列表组件add-song组件实现(4) (10:49)
    • 视频: 11-14 歌曲列表组件add-song组件实现(5) (05:27)
    • 视频: 11-15 歌曲列表组件add-song组件实现(6) (13:09)
    • 视频: 11-16 歌曲列表组件top-list组件实现 (07:39)
    • 视频: 11-17 歌曲列表组件scroll组件能力的扩展 (07:21)
  • 第12章 用户中心页面 6 节 | 41分钟

    包括收藏列表的 Vuex 数据设计与实现、收藏歌曲功能实现、页面功能开发。

    收起列表

    • 视频: 12-1 用户中心页面布局和功能介绍 (07:17)
    • 视频: 12-2 用户中心页面收藏列表的Vuex数据设计和实现 (08:18)
    • 视频: 12-3 用户中心页面收藏歌曲功能实现(上) (05:24)
    • 视频: 12-4 用户中心页面收藏歌曲功能实现(下) (07:29)
    • 视频: 12-5 用户中心页面剩余功能实现(上) (04:57)
    • 视频: 12-6 用户中心页面剩余功能实现(下) (07:25)
  • 第13章 编译打包 4 节 | 35分钟

    包括播放内核小 bug 修复、项目编译打包及 node 服务调试、路由组件实现懒加载、Vue.js 升级到最新版。

    收起列表

    • 视频: 13-1 编译打包-播放内核小bug修复 (09:45)
    • 视频: 13-2 编译打包-项目编译打包及node服务测试 (08:37)
    • 视频: 13-3 编译打包-路由组件实现懒加载 (10:51)
    • 视频: 13-4 编译打包-Vue.js升级到最新版 (04:59)
  • 第14章 课程总结 3 节 | 15分钟

    包括移动端常用工具 charles 和 vconsole 的介绍、课程回顾。

    收起列表

    • 视频: 14-1 移动端调试工具和抓包工具介绍(上) (08:19)
    • 视频: 14-2 移动端调试工具和抓包工具介绍(下) (02:55)
    • 视频: 14-3 课程总结 (03:06)
  • 第15章 课程有关资料汇总 1 节 | 0分钟

    课程有关资料汇总

    收起列表

    • 图文: 15-1 课程资料汇总
本课程已完结


讲师

ustbhuangyi Web前端工程师

曾任职百度、滴滴,现担任Zoom前端架构师,推进前后端分离架构方案,同时负责 Zoom 自研组件库。公众号《老黄的前端私房菜》,《Vue.js 技术揭秘》独立作者,《Vue.js 权威指南》主要作者,开源项目 better-scroll 作者。曾主导滴滴开源项目 cube-ui,建立团队技术博客。

讲师其他课程

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

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

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