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

Vue-QQMusic

簡介：

最近有點小閒置，因而乎但願寫點東西，正好本身喜歡聽歌，便決定本身寫一個QQ音樂的簡易版。
順便進一步加深下本身對移動端的知識。我會在每一個核心組件和部分都加下註解大體說明原理，爭取提供一個良好的代碼閱讀環境，在注視部分是採用英文寫的，請原諒我撇腳的英語o(╯□╰)o，歡迎你們給我提出更好的意見( *︾▽︾)

原理簡介：

首先這裏經過Jsonp來進行跨域獲取QQ音樂API數據，在API Hanler對API進行處理導出統一的方法來獲取數據。
核心文件則是在Store,在這裏使用Vuex統一管理頁面切換動畫，歌曲播放狀態，歌曲進度等信息。全部對於歌曲的操做都經過Vuex來進行全局管理，而後對相應的變化作出全局改變。

技術棧

• Vue全家桶（使用Vue-cli做爲構建工具）

• Webpack

• Mint-Ui

• Es6

• Sass

• Velocity, AlloyTouch等第三方庫

運行演示

線上地址：Vue-QQMusic

源碼地址：源碼

移動端請掃描下面二維碼：

運行截圖：

項目組件

• [x] 首頁 -- 完成

• [ ] 電臺 -- 沒法獲取電臺API

• [X] 歌手信息 -- 完成

• [X] 歌手列表 -- 完成

• [x] 歌曲排行 -- 完成

• [x] 歌曲列表 -- 完成

• [x] 熱門推薦 -- 完成

• [x] 歌曲搜索 -- 完成

• [x] 歌曲播放 -- 完成

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

項目結構

|-- build                            // webpack配置文件
|-- config                           // 項目打包路徑
|-- src                              // 源碼目錄 
|   |-- api                          // QQ音樂Api分析文件
|       |-- index.js                 
|   |-- assets                       // 圖片資源文件
|   |-- components                   // 組件
|       |-- fallback.vue             // 公用後退組件
|       |-- header.vue                // 重寫Mini-Ui頭部組件，來實現更多效果
|       |-- index.vue                // 首頁界面
|       |-- list.vue                 // 公用歌曲列表組件
|       |-- lyrics.vue               // 歌詞組件
|       |-- play-fixed.vue           // 底部固定歌曲播放組件
|       |-- playing.vue              // 歌曲播放頁面
|       |-- radio.vue                // 電臺界面
|       |-- ranklist.vue             // 歌曲排行榜界面
|       |-- recommend.vue            // 推薦歌曲界面
|       |-- search.vue               // 搜索界面
|       |-- singer.vue               // 歌手界面
|       |-- singerlist.vue           // 歌手列表界面
|       |-- slider.vue               // 歌詞滑動組件
|       |-- special.vue              // 特殊界面用於使用Iframe包含封面等QQ音樂原生界面
|       |-- toplist.vue              // QQ音樂巔峯榜界面
|   |-- mixin                        // 全局mixin方法
|       |-- index.js          
|   |-- router                       // Vue 路由
|       |-- index.js
|   |-- sass                         // css文件夾，採用Sass進行預編譯
|       |-- 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屏幕適應變化css(暫未使用)
|       |-- index.scss               // Sass 入口文件
|       |-- mixins.scss              // Sass 公用全局Mixin
|       |-- normalize.scss           // Normalize.css
|       |-- page.scss                // 頁面佈局css
|       |-- scaffold.scss            // scaffold css 設置基本全局樣式
|       |-- util.scss                // 公用全局Sass組件
|       |-- var.scss                 // 全局Sass變量，這裏使用sass-resources-loader向全局注入Sass變量
|   |-- store                        // Vuex Store文件，APP核心所在
|       |-- index.js       
|   |-- util                         // 全局公用函數
|       |-- index.js                 
|   |-- App.vue                      // App入口文件
|   |-- filter.js                    // 註冊全局Vue filter
|   |-- main.js                      // 程序入口文件，加載Vuex,Vue-router等插件
|   |-- mintUi.js                    // Mint-Ui配置文件
|   |-- test                         // 測試目錄，暫未使用
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 代碼編寫規格
|-- .eslintignore                    // Eslint 忽略的文件
|-- .eslintrc.js                     // EsLint 配置 暫未使用 
|-- .gitignore                       // git ingnore
|-- .postcssrc.js                    // post css 配置文件
|-- README.md                        // README
|-- index.html                       // 入口html文件
`-- package.json                     // 項目及工具的依賴配置文件

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