Vue 2.0开发企业级移动端音乐WebAPP

第1章 课程内容介绍
包括课程概述、课程安排、学习前提、讲授方式等方面的介绍,最后演示了整个音乐App的功能,让同学们对课程项目有一个直观的了解。
1-1 导学
1-2 课前必读(源码获取方式)

第2章 项目准备工作
包括项目需求分析、脚手架初始化代码、项目目录介绍及图标字体、公共样式等资源的准备 。
2-1 需求分析
2-2 Vue-cli脚手架安装
2-3 项目目录介绍及图标字体、公共样式等资源准备

第3章 页面骨架开发
包括页面入口、header 组件的编写、路由配置及顶导 tab 组件开发。
3-1 页面入口+header 组件的编写
3-2 路由配置+ tab 顶导组件开发

第4章 推荐页面开发
包括 jsonp 原理介绍和 Promise 封装、轮播图组件开发、歌单接口数据分析和抓取、axios 介绍和后端接口代理、歌单列表组件开发和数据应用、scroll 组件的抽象和应用、vue-lazyloader 懒加载插件的介绍和应用、loading 基础组件开发和应用。...
4-1 页面简介+轮播图数据分析
4-2 jsonp原理介绍+Promise封装
4-3 jsonp的应用+轮播图数据抓取
4-4 轮播图组件实现(上)
4-5 轮播图组件实现(中)
4-6 轮播图组件实现(下)
4-7 歌单数据接口分析
4-8 axios 介绍和后端接口代理
4-9 歌单列表组件开发和数据的应用
4-10 scroll 组件的抽象和应用(上)
4-11 scroll 组件的抽象和应用(下)
4-12 vue-lazyload 懒加载插件介绍和应用
4-13 loading 基础组件的开发和应用

第5章 歌手页面开发
包括歌手数据的抓取和处理、Singer 类的封装、类通讯录组件 listview开发和应用。
5-1 歌手页面布局和设计讲解
5-2 歌手数据接口抓取
5-3 歌手数据处理和 Singer 类的封装
5-4 listview 基础组件的开发和应用-滚动列表实现
5-5 listview 基础组件的开发和应用-右侧快速入口实现(1)
5-6 listview 基础组件的开发和应用-右侧快速入口实现(2)
5-7 listview 基础组件的开发和应用-右侧快速入口实现(3)
5-8 listview 基础组件的开发和应用-右侧快速入口实现(4)
5-9 listview 基础组件的开发和应用-滚动固定标题实现(上)
5-10 listview 基础组件的开发和应用-滚动固定标题实现(下)

第6章 歌手详情页开发
包括子路由的配置及转场动画实现、Vuex 的介绍、Vuex 初始化歌手数据的配置、歌手详情页数据抓取和处理、Song 类的封装、music-list 组件开发。
6-1 歌手详情页布局和设计详解
6-2 子路由配置以及转场动画实现
6-3 初识 Vuex
6-4 Vuex 初始化及歌手数据的配置
6-5 歌手详情数据抓取
6-6 歌手详情数据处理和Song类的封装(上)
6-7 歌手详情数据处理和Song类的封装(下)
6-8 music-list 组件开发(1)
6-9 music-list 组件开发(2)
6-10 music-list 组件开发(3)
6-11 music-list 组件开发(4)
6-12 music-list 组件开发(5)
6-13 music-list 组件开发(6)
6-14 music-list 组件开发(7)

第7章 播放器内置组件开发
包括播放器 Vuex 数据设计和相关应用、播放器基础样式及歌曲数据应用、 播放器展开收起动画的实现、播放器前进后退功能实现、播放器播放时间获取和更新、progress-bar 进度条组件开发、progress-circle 圆形进度条组件开发、播放器模式切换功能实现、播放器歌词数据抓取和解析、播放器歌词左右滑动的实现、播放器底部播...
7-1 播放器页面设计详解
7-2 播放器Vuex数据设计
7-3 播放器Vuex的相关应用
7-4 播放器基础样式及歌曲数据的应用
7-5 播放器展开收起动画(上)
7-6 播放器展开收起动画(中)
7-7 播放器展开收起动画(下)
7-8 播放器歌曲播放功能实现
7-9 播放器歌曲前进后退功能实现(上)
7-10 播放器歌曲前进后退功能实现(下)
7-11 播放器播放时间获取和更新
7-12 播放器progress-bar进度条组件实现(上)
7-13 播放器progress-bar进度条组件实现(中)
7-14 播放器progress-bar进度条组件实现(下)
7-15 播放器progress-circle 圆形进度条组件实现
7-16 播放器模式切换功能实现(上)
7-17 播放器模式切换功能实现(中)
7-18 播放器模式切换功能实现(下)
7-19 播放器歌词数据抓取
7-20 播放器歌词数据解析
7-21 播放器歌词滚动列表实现
7-22 播放器歌词左右滑动实现(上)
7-23 播放器歌词左右滑动实现(下)
7-24 播放器歌词剩余功能实现
7-25 播放器底部播放器适配+mixin的应用

第8章 歌单页面开发
包括歌单页面的布局介绍、Vuex 实现路由数据通讯、歌单详情页数据抓取和处理。
8-1 歌单详情页布局介绍及Vuex实现路由数据通讯
8-2 歌单详情页数据抓取
8-3 歌单详情页数据的处理和应用

第9章 排行榜及详情页开发
包括排行榜布局介绍、排行榜数据抓取和应用、榜单详情页布局介绍、Vuex 实现路由数据通讯、榜单详情页数据抓取和应用。
9-1 排行页面布局介绍及排行榜数据抓取
9-2 排行页排行榜数据应用
9-3 榜单详情页布局介绍及Vuex实现路由数据通讯
9-4 榜单详情页数据抓取和应用
9-5 带排行的song-list组件扩展和应用

第10章 搜索页面开发
包括search-box 组件开发、热门搜索数据抓取和应用、suggest 组件开发、搜索结果保存功能实现、search-list 组件开发、confirm 组件开发。
10-1 搜索页面页面布局和功能介绍
10-2 搜索页面search-box组件开发
10-3 搜索页面热门搜索数据抓取和应用
10-4 搜索页面suggest组件开发(1)
10-5 搜索页面suggest组件开发(2)
10-6 搜索页面suggest组件开发(3)
10-7 搜索页面suggest组件开发(4)
10-8 搜索页面suggest组件开发(5)
10-9 搜索页面suggest组件开发(6)
10-10 搜索页面suggest组件开发(7)
10-11 搜索页面搜索结果保存功能实现(1)
10-12 搜索页面搜索结果保存功能实现(2)
10-13 搜索页面搜索结果保存功能实现(3)
10-14 搜索页面search-list 组件功能实现(上)
10-15 搜索页面search-list 组件功能实现(下)
10-16 搜索页面confirm 组件功能实现
10-17 搜索页面剩余功能实现(上)
10-18 搜索页面剩余功能实现(下)

第11章 歌曲列表组件
包括歌曲列表组件的显示和隐藏控制、播放列表的实现、player mixin 的抽象、 add-song 组件开发、top-list 组件开发、scroll 组件能力的扩展
11-1 歌曲列表组件布局和功能介绍
11-2 歌曲列表组件显示和隐藏的控制
11-3 歌曲列表组件播放列表的实现(1)
11-4 歌曲列表组件播放列表的实现(2)
11-5 歌曲列表组件播放列表的实现(3)
11-6 歌曲列表组件播放列表的实现(4)
11-7 歌曲列表组件播放列表的实现(5)
11-8 歌曲列表组件 playerMixin的抽象(上)
11-9 歌曲列表组件 playerMixin的抽象(下)
11-10 歌曲列表组件add-song组件实现(1)
11-11 歌曲列表组件add-song组件实现(2)
11-12 歌曲列表组件add-song组件实现(3)
11-13 歌曲列表组件add-song组件实现(4)
11-14 歌曲列表组件add-song组件实现(5)
11-15 歌曲列表组件add-song组件实现(6)
11-16 歌曲列表组件top-list组件实现
11-17 歌曲列表组件scroll组件能力的扩展

第12章 用户中心页面
包括收藏列表的 Vuex 数据设计与实现、收藏歌曲功能实现、页面功能开发。
12-1 用户中心页面布局和功能介绍
12-2 用户中心页面收藏列表的Vuex数据设计和实现
12-3 用户中心页面收藏歌曲功能实现(上)
12-4 用户中心页面收藏歌曲功能实现(下)
12-5 用户中心页面剩余功能实现(上)
12-6 用户中心页面剩余功能实现(下)

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

第14章 课程总结
包括移动端常用工具 charles 和 vconsole 的介绍、课程回顾。
14-1 移动端调试工具和抓包工具介绍(上)
14-2 移动端调试工具和抓包工具介绍(下)
14-3 课程总结

第15章 课程有关资料汇总
课程有关资料汇总
15-1 课程资料汇总

下载地址:Vue 2.0开发企业级移动端音乐WebAPP

原文地址:https://www.cnblogs.com/jianghaoyuan/p/10015180.html

时间: 2024-07-31 08:04:18

Vue 2.0开发企业级移动端音乐WebAPP的相关文章

vue.js2.0开发中的几个技巧

最近用Vue.js开发了几个项目,Vue的双向数据绑定和组件化让我耳目一新,减少了很多底层重复的工作,和基于jQuey的前端开发不起来,基于Vue的开发给我一种酣畅淋漓的感觉. 下面给出我基于Vue.js做的几个页面:爆料页面.520贵州.百姓关注抢红包. 当然,在开发的过程中,不可避免的遇到了一些问题和坑,在此记录这些问题,积累经验. 1.测试环境相对路径的问题 Vue.js 2.0可以基于wepack构建,如果需要打包生成最终输出代码,直接在DOS窗口中输入命令:npm run build,

vue 2.0 开发实践总结之疑难篇

续上一篇文章:http://www.cnblogs.com/beidan/p/6129891.html ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1.  vue 组件的说明和使用 一个组件实质上是一个拥有预定义选项的一个 Vue 实例 在header组件内部允许外部使用,需要导出属性,有2种导出方法 1.  默认导出(不用命名) 1 export default { 2 data () { 3

vue 3.0 项目搭建移动端 (三) computed 和 methods 和 watch

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }, // 在组件中 methods: { reversedMessage: function () { retur

CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP

学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料. 下载地址:http://pan.baidu.com/s/1jI05TPW 基于Vue 全家桶 (2.x)制作的移动端音乐 WebApp ,一个媲美原生的移动端音乐 App,项目完

Vue 实现网易云音乐 WebApp

?? 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐.flex 布局适配常见移动端. ?? 项目演示地址:移动端音乐 WebApp,或者可以扫描二维码访问: 电脑在 Chrome 调试模式下食用效果更佳,开启调试模式的手机模式后,如果不能滚动,刷新一下页面即可 ?? 源码地址:vue-music-webapp,欢迎 star 和

使用 Vue 2.0 实现服务端渲染的 HackerNews

Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.vue-hackernews-2.0 是 Vue 作者在GitHub上面放的 Vue 2.0 的一个示例项目,结合 Express.vue-router & vuex 来构建,是很好的学习案例. Features Server Side Rendering Vue + vue-router + vue

Vue全家桶实战 从零独立开发企业级电商系统

Vue全家桶实战 从零独立开发企业级电商系统(免费升级Vue3.0)现阶段,电商系统随处可见,具有很大市场潜力:同时因为商城系统复杂,涉及到丰富的知识点,如果能进行电商系统的开发,其它各类型的前端系统也能掌握.本课程以Vue全家桶作为主要的技术体系,模拟小米商城,带大家从0开始开发网页和交互功能.你能进行完整的项目架构.体会页面开发的全流程.学习丰富的技术栈和各类组件知识,还能了解Git.动画.开发调试等方面的知识.同时项目本身具有很强的实用性,稍作修改,便能"为我所用".相信此课程能

Vue从零独立开发企业级电商系统

Vue全家桶实战 从零独立开发企业级电商系统 ==学习视频-资料整理. 密码:7zxc== 学习目标1: Node环境安装 讲解Node环境安装和配置,以及Node版本如何做卸载和升级 Node环境安装 Node升降级 学习目标2: Git安装和配置 介绍Git软件的安装和配置,其次对Git命令做详细的操作演示. Git的安装 Git配置 Git配置SSH公钥 VSCode操作Git Git常用命令 学习目标3: Vue Cli4.0安装和使用 首次对Vue脚手架4.0版本做安装和演示,并对可视

项目二:企业级java电商网站开发(服务端)

声明:项目源于网络,支持正版教程,学习使用,仅记录在此 项目介绍 企业级java电商网站开发(服务端),模块划分:用户管理,商品管理,商品品类管理,订单管理,订单详情管理,购物车管理,收货地址管理,支付管理 集成工具使用idea,一个springboot项目,使用maven进行依赖管理,持久层使用mybatis(接口+mapper xml),没有前端页面,仅服务端开发,最后返回封装好的数据,以json方式呈现,可以使用postman工具,google浏览器的Restlet Client插件等进行