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

haoguo 發布于2019-08-20 16:51 / 1645人閱讀

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

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

GPU云服務器云服務器詳細說明安裝php詳細說明 icp備案流程詳細說明 cn.com域名詳細說明

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83204.html

一個高仿追書神器的vue閱讀器。已成功做成app

摘要：原創，基本上是界面，新加了七八個功能，解決了前輩閱讀器上的絕大部分，并成功添加路徑打包成。畢竟只是一個學習項目跨域問題本次開發使用的是代理追書神器，是不需要后臺認證直接可以跨域的接口，以實現在移動端顯示的效果。應屆畢業生，目前正在找工作，簡歷需要所以開發了這個app。剛開始開發也是一臉懵逼，因為沒得后臺，一些邏輯功能也不知道怎么拓展。好在看到了追書神器api接口，頓時讓我決心做出這一...

miracledan 2019-08-22 18:18 評論0 收藏0
Vue全家桶高仿網易云音樂mac客戶端版（不像賠十個！！）

摘要：庫用了魔改樣式的歌詞滾動部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標準預處理器安裝與使用前端項目后端項目音樂播放器雖然爛大街了，但是作為前端沒自己擼一個一直是個遺憾，而且偶然間發現pc端web版的網易云音樂做的實在是太簡陋了，社區仿pc客戶端的網易云也不多見，為了彌補這個遺憾，就用vue全家桶模仿mac客戶端的ui實現了一個，歡迎提出意見和star~ 預覽地址源碼地址...

mgckid 2019-08-26 10:23 評論0 收藏0
Vue2.0—仿知乎日報總結

摘要：一個基于全家桶開發的仿知乎日報單頁應用項目地址源碼地址項目在線地址在線地址模式下推薦使用移動端模式瀏覽去觀看如果覺得做得還不錯或者項目源碼對您有幫助希望您小抬右手到右上角點一個您的支持是作者長期更新維護的動力項目起源從二月份開始學習學習了 Vue-News 一個基于vue全家桶開發的仿知乎日報單頁應用項目github地址:源碼地址項目在線地址:在線地址 (PC模式下推薦使用chro...

lentoo 2019-08-20 16:18 評論0 收藏0
vue2.5全家桶高仿vivo商城百分之95

摘要：全家桶還有就是組件庫開頭在線預覽舊的版本移動端商城新的版本移動端商城項目演示地址移動端商城建議調試手機模式下預覽因為剛買的域名主機所以要解析，實名認證才可以瀏覽，所以你們還是下把項目給下載下來本地運行看把 vue全家桶 vue2.0+vuex+axios+better-scroll還有就是miut-ui組件庫開頭在線預覽舊的版本：vivo移動端商城新的版本：vivo移動端商城項目...

inapt 2019-08-22 17:33 評論0 收藏0
基于Vue2全家桶的移動端AppDEMO實現

好久沒更新過Vue的小文章，上次做了一個基于Vue+Mint-ui的移動端AppDemo,集成了推送功能，然后通過cordova打包生成apk，移動端表現還不錯，今天把這個小東西分享出來，希望有更多的小伙伴能夠用Vue去做一些有意思的東西，本人才疏學淺，有說的不對的地方，還請大家多多指教。下面按照慣例放上demo地址和源碼地址,希望大家能給我點下star：Demo(進去需要先注冊才能登錄,用的lo...

Jiavan 2019-08-20 13:58 評論0 收藏0