摘要:仿網(wǎng)易云音樂項目地址來源感謝讓我能用喜歡的東西做一個屬于自己的播放器源碼地址不要臉的求哈哈哈項目預(yù)覽端按切換手機調(diào)試模式效果更佳移動端可直接掃碼技術(shù)棧文件結(jié)構(gòu)構(gòu)建服務(wù)和配置項目不同環(huán)境的配置項目目錄項目入口文件項目配置文件靜態(tài)資源生產(chǎn)目錄
仿網(wǎng)易云音樂(webapp) 項目地址 (project address)
api來源 感謝binaryify讓我能用喜歡的東西做一個屬于自己的播放器!
源碼地址 不要臉的求star 哈哈哈!!!
項目預(yù)覽 1mhere.cn (pc端按F12切換手機調(diào)試模式效果更佳!)
(移動端可直接掃碼)
技術(shù)棧 (technology)vue2.0 + vuex + vue-router2.0 + es6 + axios + vux + less + flex文件結(jié)構(gòu) (File structure)
├── build 構(gòu)建服務(wù)和webpack配置 ├── config 項目不同環(huán)境的配置 ├── dist 項目build目錄 ├── index.html 項目入口文件 ├── package.json 項目配置文件 ├── static 靜態(tài)資源 ├── src 生產(chǎn)目錄 |—— api api列表和數(shù)據(jù)處理 |——|—— apiList.js api列表 |——|—— getData.js 數(shù)據(jù)處理(封裝一個axios請求) |—— assets 靜態(tài)資源(img,less) |——|—— img 靜態(tài)圖片 |——|—— style 樣式文件 |—— components 公用組件 |——|—— bottomSongList 播放器播放列表組件 |——|—— headerNav 頭部導(dǎo)航組件 |——|—— music 音樂組件 |—— page 頁面組件 |——|—— albumsListDetails 專輯內(nèi)容組件 |——|—— recommend 個性推薦組件 |——|—— searchList 搜索列表組件 |——|—— singer 歌手組件 |——|—— songDetails 歌曲詳情組件 |——|——|—— player 播放器組件 |——|—— songList 歌單組件 |——|—— songListDetails 歌單詳情組件 |——|—— topList 排行榜組件 |—— router 路由組件 |—— store 數(shù)據(jù)狀態(tài)管理組件 |—— util 公用方法項目功能 (Project Function) 完成功能(finish function)
個性推薦,歌單,排行榜頁面
滑動功能(左右滑動切換菜單)
播放功能(快進,快退,上一曲,下一曲,歌詞同步等)
搜索功能(熱門搜索,單曲,歌手,專輯,歌單,用戶)
歌單功能(最新,最熱,精品歌單及詳情展示)
歌手專輯功能(介紹及詳情展示)
排行榜功能(云音樂官方版)
效果圖 (effect picture) 項目運行(Probject running)1.克隆項目到本地 : git clone https://github.com/webfansplz...
2.安裝依賴環(huán)境 : npm install
3.啟動項目 : npm run dev
4.打包項目 : npm run build
總結(jié)(summary)本項目始于本人興趣,還有許多不足大家輕噴,歡迎大家一起交流討論學(xué)習(xí),喜歡的點個star唄,哈哈哈!??!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/88306.html
摘要:項目地址由于網(wǎng)易云的限制,部分功能可能會失效,如有需要可以項目下來在本地運行,如果炸了,麻煩在評論中告知一下我因為做的是端所以請在電腦端訪問源碼地址項目預(yù)覽評論和歌單詳情都封了我的暫時無法使用這兩個功能了項目描述前端部分實現(xiàn)了滑塊彈出層歌詞 項目地址 由于網(wǎng)易云的api限制,部分功能可能會失效,如有需要可以clone項目下來在本地運行,如果api炸了,麻煩在評論中告知一下我 因為做的...
摘要:庫用了魔改樣式的歌詞滾動部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標(biāo)準(zhǔn)預(yù)處理器安裝與使用前端項目后端項目 音樂播放器雖然爛大街了,但是作為前端沒自己擼一個一直是個遺憾,而且偶然間發(fā)現(xiàn)pc端web版的網(wǎng)易云音樂做的實在是太簡陋了,社區(qū)仿pc客戶端的網(wǎng)易云也不多見,為了彌補這個遺憾,就用vue全家桶模仿mac客戶端的ui實現(xiàn)了一個,歡迎提出意見和star~ 預(yù)覽地址 源碼地址...
摘要:前端日報精選新的長度單位你知道么高階函數(shù)一點通的故事隔行掃描算法專題之?dāng)?shù)組去重全家桶每個人都能做的網(wǎng)易云音樂騰訊前端團隊社區(qū)中文前端推薦第天聽說你缺少一個順手的圖床知乎專欄譯怎樣創(chuàng)建定制表單組件碎語掘金函數(shù)式編程到底是個啥 2017-06-22 前端日報 精選 CSS 新的長度單位 fr 你知道么?高階函數(shù)一點通png的故事:隔行掃描算法JavaScript專題之?dāng)?shù)組去重 · Issu...
摘要:關(guān)于路由,剛開始設(shè)計路由的時候想了很多,由于一開始的目標(biāo)就是網(wǎng)易云音樂的所有內(nèi)容,所以設(shè)計了三級路由,,大概這樣,點擊查看。 標(biāo)題略夸張了,但是這個從ui還原上已經(jīng)很接近官方版本了。雖然目前這個是很多人造過的輪子,但是可能每個人的實現(xiàn)方式都不一樣,自己寫一遍也會有許多收獲。 項目地址 預(yù)覽地址 api:ap使用的是一個開源的nodejs封裝的網(wǎng)易云音樂api,地址 技術(shù)棧 vue...
摘要:項目地址暫時只實現(xiàn)了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現(xiàn)在已經(jīng)包括了打包平臺的功能了源碼地址項目預(yù)覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現(xiàn)了滑塊增量分頁新曲等使用了做單頁應(yīng)用使用了處理路由使用了管 項目地址 暫時只實現(xiàn)了基本功能 加了一點微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點微?小的適配 現(xiàn)在已經(jīng)包括了ele...
閱讀 2814·2021-11-16 11:44
閱讀 978·2021-10-09 09:58
閱讀 4503·2021-09-24 09:48
閱讀 4359·2021-09-23 11:56
閱讀 2415·2021-09-22 15:48
閱讀 1902·2021-09-07 10:07
閱讀 3213·2021-08-31 09:46
閱讀 514·2019-08-30 15:56