Vue全家桶+Mint-Ui打造高仿QQMusic，搭配詳細(xì)說明

haoguo 發(fā)布于2019-08-20 16:51 / 1648人閱讀

摘要：簡(jiǎn)介最近有點(diǎn)小閑置，于是乎希望寫點(diǎn)東西，正好自己喜歡聽歌，便決定自己寫一個(gè)音樂的簡(jiǎn)易版。核心文件則是在在這里使用統(tǒng)一管理頁面切換動(dòng)畫，歌曲播放狀態(tài)，歌曲進(jìn)度等信息。所有對(duì)于歌曲的操作都通過來進(jìn)行全局管理，然后對(duì)相應(yīng)的變化做出全局改變。

Vue-QQMusic 簡(jiǎn)介：

最近有點(diǎn)小閑置，于是乎希望寫點(diǎn)東西，正好自己喜歡聽歌，便決定自己寫一個(gè)QQ音樂的簡(jiǎn)易版。
順便進(jìn)一步加深下自己對(duì)移動(dòng)端的知識(shí)。我會(huì)在每個(gè)核心組件和部分都加下注解大致說明原理，爭(zhēng)取提供一個(gè)良好的代碼閱讀環(huán)境，在注視部分是采用英文寫的，請(qǐng)?jiān)徫移材_的英語o(╯□╰)o，歡迎大家給我提出更好的意見( *︾▽?duì)?

原理簡(jiǎn)介：

首先這里通過Jsonp來進(jìn)行跨域獲取QQ音樂API數(shù)據(jù)，在API Hanler對(duì)API進(jìn)行處理導(dǎo)出統(tǒng)一的方法來獲取數(shù)據(jù)。
核心文件則是在Store,在這里使用Vuex統(tǒng)一管理頁面切換動(dòng)畫，歌曲播放狀態(tài)，歌曲進(jìn)度等信息。所有對(duì)于歌曲的操作都通過Vuex來進(jìn)行全局管理，然后對(duì)相應(yīng)的變化做出全局改變。

技術(shù)棧

Vue全家桶（使用Vue-cli作為構(gòu)建工具）

Webpack

Mint-Ui

Es6

Sass

Velocity, AlloyTouch等第三方庫

運(yùn)行演示 線上地址：Vue-QQMusic 源碼地址：源碼 移動(dòng)端請(qǐng)掃描下面二維碼：

運(yùn)行截圖：

項(xiàng)目組件

[x] 首頁 -- 完成

[ ] 電臺(tái) -- 無法獲取電臺(tái)API

[X] 歌手信息 -- 完成

[X] 歌手列表 -- 完成

[x] 歌曲排行 -- 完成

[x] 歌曲列表 -- 完成

[x] 熱門推薦 -- 完成

[x] 歌曲搜索 -- 完成

[x] 歌曲播放 -- 完成

[x] 底部固定歌曲播放條 -- 完成

項(xiàng)目結(jié)構(gòu)

|-- build                            // webpack配置文件
|-- config                           // 項(xiàng)目打包路徑
|-- src ? ? ? ? ? ? ? ? ? ? ? ? ? ?  // 源碼目錄 
| ? |-- api ? ? ? ? ? ? ? ? ? ? ? ?  // QQ音樂Api分析文件
|       |-- index.js ? ? ? ? ? ? ? ? 
|   |-- assets ? ? ? ? ? ? ? ? ? ? ? // 圖片資源文件
| ? |-- components ? ? ? ? ? ? ? ? ? // 組件
| ? ? ? |-- fallback.vue ? ? ? ? ? ? // 公用后退組件
| ? ? ? |-- header.vue ? ? ? ? ?      // 重寫Mini-Ui頭部組件，來實(shí)現(xiàn)更多效果
| ? ? ? |-- index.vue ? ? ? ? ? ? ?  // 首頁界面
| ? ? ? |-- list.vue ? ? ? ? ? ? ? ? // 公用歌曲列表組件
| ? ? ? |-- lyrics.vue ? ? ? ? ? ? ? // 歌詞組件
| ? ? ? |-- play-fixed.vue ? ? ? ? ? // 底部固定歌曲播放組件
| ? ? ? |-- playing.vue ? ? ? ? ? ?  // 歌曲播放頁面
| ? ? ? |-- radio.vue ? ? ? ? ? ? ?  // 電臺(tái)界面
| ? ? ? |-- ranklist.vue ? ? ? ? ? ? // 歌曲排行榜界面
| ? ? ? |-- recommend.vue ? ? ? ? ? ?// 推薦歌曲界面
| ? ? ? |-- search.vue ? ? ? ? ? ? ? // 搜索界面
| ? ? ? |-- singer.vue ? ? ? ? ? ? ? // 歌手界面
| ? ? ? |-- singerlist.vue ? ? ? ? ? // 歌手列表界面
| ? ? ? |-- slider.vue ? ? ? ? ? ? ? // 歌詞滑動(dòng)組件
| ? ? ? |-- special.vue ? ? ? ? ? ?  // 特殊界面用于使用Iframe包含封面等QQ音樂原生界面
| ? ? ? |-- toplist.vue ? ? ? ? ? ?  // QQ音樂巔峰榜界面
| ? |-- mixin ? ? ? ? ? ? ? ? ? ? ?  // 全局mixin方法
| ? ? ? |-- index.js ? ? ? ? ?
| ? |-- router ? ? ? ? ? ? ? ? ? ? ? // Vue 路由
| ? ? ? |-- index.js
| ? |-- sass ? ? ? ? ? ? ? ? ? ? ? ? // css文件夾，采用Sass進(jìn)行預(yù)編譯
| ? ? ? |-- packages ? ? ? ? ? ? ? ? // Mint-Ui文件夾，覆蓋Mint-Ui原有樣式
| ? ? ? ? ? ?|-- cell.scss
| ? ? ? ? ? ?|-- header.scss
| ? ? ? ? ? ?|-- index.scss
| ? ? ? ? ? ?|-- navbar.scss
| ? ? ? ? ? ?|-- search.scss
| ? ? ? |-- themes ? ? ? ? ? ? ? ? ? // APP主題CSS，未來將增加主題切換功能
| ? ? ? ? ? |-- index.scss
| ? ? ? |-- transition ? ? ? ? ? ? ? // 全局公用Transition, Animation
| ? ? ? ? ? ?|-- index.scss
| ? ? ? |-- dimension.scss ? ? ? ? ? // 阿里SUI, Rem屏幕適應(yīng)變化css(暫未使用)
| ? ? ? |-- index.scss ? ? ? ? ? ? ? // Sass 入口文件
| ? ? ? |-- mixins.scss ? ? ? ? ? ?  // Sass 公用全局Mixin
| ? ? ? |-- normalize.scss ? ? ? ? ? // Normalize.css
| ? ? ? |-- page.scss ? ? ? ? ? ? ?  // 頁面布局css
| ? ? ? |-- scaffold.scss ? ? ? ? ?  // scaffold css 設(shè)置基本全局樣式
| ? ? ? |-- util.scss ? ? ? ? ?      // 公用全局Sass組件
| ? ? ? |-- var.scss ? ? ? ? ?       // 全局Sass變量，這里使用sass-resources-loader向全局注入Sass變量
| ? |-- store ? ? ? ? ? ? ? ? ? ? ?  // Vuex Store文件，APP核心所在
| ? ? ? |-- index.js ? ? ? 
| ? |-- util ? ? ? ? ? ? ? ? ? ? ? ? // 全局公用函數(shù)
| ? ? ? |-- index.js ? ? ? ? ? ? ? ? 
| ? |-- App.vue ? ? ? ? ? ? ? ? ? ?  // App入口文件
| ? |-- filter.js? ? ? ? ? ? ? ? ? ? // 注冊(cè)全局Vue filter
| ? |-- main.js ? ? ? ? ? ? ? ? ? ?  // 程序入口文件，加載Vuex,Vue-router等插件
| ? |-- mintUi.js ? ? ? ? ? ? ? ? ?  // Mint-Ui配置文件
| ? |-- test ? ? ? ? ? ? ? ? ? ? ? ? // 測(cè)試目錄，暫未使用
|-- .babelrc ? ? ? ? ? ? ? ? ? ? ? ? // ES6語法編譯配置
|-- .editorconfig                    // 代碼編寫規(guī)格
|-- .eslintignore ? ? ? ? ? ? ? ? ?  // Eslint 忽略的文件
|-- .eslintrc.js ? ? ? ? ? ? ? ? ? ? // EsLint 配置?暫未使用 
|-- .gitignore                       // git ingnore
|-- .postcssrc.js ? ? ? ? ? ? ? ? ?  // post css 配置文件
|-- README.md                        // README
|-- index.html ? ? ? ? ? ? ? ? ? ? ? // 入口html文件
`-- package.json                     // 項(xiàng)目及工具的依賴配置文件

Build Setup

# download
git clone https://github.com/Panda-Hope/vue-qqmusic

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test