成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

haoguo / 1710人閱讀

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

Vue-QQMusic 簡介：

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

原理簡介：

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

技術(shù)棧

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

Webpack

Mint-Ui

Es6

Sass

Velocity, AlloyTouch等第三方庫

運行演示 線上地址：Vue-QQMusic 源碼地址：源碼 移動端請掃描下面二維碼：

運行截圖：


項目組件

[x] 首頁 -- 完成

[ ] 電臺 -- 無法獲取電臺API

[X] 歌手信息 -- 完成

[X] 歌手列表 -- 完成

[x] 歌曲排行 -- 完成

[x] 歌曲列表 -- 完成

[x] 熱門推薦 -- 完成

[x] 歌曲搜索 -- 完成

[x] 歌曲播放 -- 完成

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

項目結(jié)構(gòu) 
|-- build                            // webpack配置文件
|-- config                           // 項目打包路徑
|-- src ? ? ? ? ? ? ? ? ? ? ? ? ? ?  // 源碼目錄 
| ? |-- api ? ? ? ? ? ? ? ? ? ? ? ?  // QQ音樂Api分析文件
|       |-- index.js ? ? ? ? ? ? ? ? 
|   |-- assets ? ? ? ? ? ? ? ? ? ? ? // 圖片資源文件
| ? |-- components ? ? ? ? ? ? ? ? ? // 組件
| ? ? ? |-- fallback.vue ? ? ? ? ? ? // 公用后退組件
| ? ? ? |-- header.vue ? ? ? ? ?      // 重寫Mini-Ui頭部組件，來實現(xiàn)更多效果
| ? ? ? |-- 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屏幕適應(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? ? ? ? ? ? ? ? ? ? // 注冊全局Vue filter
| ? |-- main.js ? ? ? ? ? ? ? ? ? ?  // 程序入口文件，加載Vuex,Vue-router等插件
| ? |-- mintUi.js ? ? ? ? ? ? ? ? ?  // Mint-Ui配置文件
| ? |-- test ? ? ? ? ? ? ? ? ? ? ? ? // 測試目錄，暫未使用
|-- .babelrc ? ? ? ? ? ? ? ? ? ? ? ? // ES6語法編譯配置
|-- .editorconfig                    // 代碼編寫規(guī)格
|-- .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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83204.html

相關(guān)文章

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

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

    miracledan 評論0 收藏0

  • Vue全家桶高仿網(wǎng)易云音樂mac客戶端版（不像賠十個?。。?/b>

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

    mgckid 評論0 收藏0

  • Vue2.0—仿知乎日報總結(jié)

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

    lentoo 評論0 收藏0

  • vue2.5全家桶 高仿vivo商城 百分之95

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

    inapt 評論0 收藏0

  • 基于Vue2全家桶的移動端AppDEMO實現(xiàn)

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

    Jiavan 評論0 收藏0

發(fā)表評論

0條評論

haoguo

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<