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