1. 程式人生 > >Vue 2.0開發企業級移動端音樂WebAPP

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