資訊專(zhuān)欄INFORMATION COLUMN
摘要：仿網(wǎng)易云音樂(lè)項(xiàng)目地址來(lái)源感謝讓我能用喜歡的東西做一個(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)易云音樂(lè)(webapp) 項(xiàng)目地址 (project address)
api來(lái)源 感謝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請(qǐng)求)
|—— assets 靜態(tài)資源(img,less)
|——|—— img 靜態(tài)圖片
|——|—— style 樣式文件
|—— components 公用組件
|——|—— bottomSongList 播放器播放列表組件
|——|—— headerNav 頭部導(dǎo)航組件
|——|—— music 音樂(lè)組件
|—— page 頁(yè)面組件
|——|—— albumsListDetails 專(zhuān)輯內(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è)性推薦,歌單,排行榜頁(yè)面
滑動(dòng)功能(左右滑動(dòng)切換菜單)
播放功能(快進(jìn),快退,上一曲,下一曲,歌詞同步等)
搜索功能(熱門(mén)搜索,單曲,歌手,專(zhuān)輯,歌單,用戶(hù))
歌單功能(最新,最熱,精品歌單及詳情展示)
歌手專(zhuān)輯功能(介紹及詳情展示)
排行榜功能(云音樂(lè)官方版)
效果圖 (effect picture) 項(xiàng)目運(yùn)行(Probject running)1.克隆項(xiàng)目到本地 : git clone https://github.com/webfansplz...
2.安裝依賴(lài)環(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88306.html
摘要：項(xiàng)目地址由于網(wǎng)易云的限制，部分功能可能會(huì)失效，如有需要可以項(xiàng)目下來(lái)在本地運(yùn)行，如果炸了，麻煩在評(píng)論中告知一下我因?yàn)樽龅氖嵌怂哉?qǐng)?jiān)陔娔X端訪(fǎng)問(wèn)源碼地址項(xiàng)目預(yù)覽評(píng)論和歌單詳情都封了我的暫時(shí)無(wú)法使用這兩個(gè)功能了項(xiàng)目描述前端部分實(shí)現(xiàn)了滑塊彈出層歌詞 項(xiàng)目地址 由于網(wǎng)易云的api限制，部分功能可能會(huì)失效，如有需要可以clone項(xiàng)目下來(lái)在本地運(yùn)行，如果api炸了，麻煩在評(píng)論中告知一下我 因?yàn)樽龅?..
摘要：庫(kù)用了魔改樣式的歌詞滾動(dòng)部分用了黃軼老大的賊爽主題換膚用的變量替換。語(yǔ)言的下一代標(biāo)準(zhǔn)預(yù)處理器安裝與使用前端項(xiàng)目后端項(xiàng)目 音樂(lè)播放器雖然爛大街了，但是作為前端沒(méi)自己擼一個(gè)一直是個(gè)遺憾，而且偶然間發(fā)現(xiàn)pc端web版的網(wǎng)易云音樂(lè)做的實(shí)在是太簡(jiǎn)陋了，社區(qū)仿pc客戶(hù)端的網(wǎng)易云也不多見(jiàn)，為了彌補(bǔ)這個(gè)遺憾，就用vue全家桶模仿mac客戶(hù)端的ui實(shí)現(xiàn)了一個(gè)，歡迎提出意見(jiàn)和star~ 預(yù)覽地址 源碼地址...
摘要：前端日?qǐng)?bào)精選新的長(zhǎng)度單位你知道么高階函數(shù)一點(diǎn)通的故事隔行掃描算法專(zhuān)題之?dāng)?shù)組去重全家桶每個(gè)人都能做的網(wǎng)易云音樂(lè)騰訊前端團(tuán)隊(duì)社區(qū)中文前端推薦第天聽(tīng)說(shuō)你缺少一個(gè)順手的圖床知乎專(zhuān)欄譯怎樣創(chuàng)建定制表單組件碎語(yǔ)掘金函數(shù)式編程到底是個(gè)啥 2017-06-22 前端日?qǐng)?bào) 精選 CSS 新的長(zhǎng)度單位 fr 你知道么？高階函數(shù)一點(diǎn)通png的故事：隔行掃描算法JavaScript專(zhuān)題之?dāng)?shù)組去重 · Issu...
摘要：關(guān)于路由，剛開(kāi)始設(shè)計(jì)路由的時(shí)候想了很多，由于一開(kāi)始的目標(biāo)就是網(wǎng)易云音樂(lè)的所有內(nèi)容，所以設(shè)計(jì)了三級(jí)路由，，大概這樣，點(diǎn)擊查看。 標(biāo)題略夸張了，但是這個(gè)從ui還原上已經(jīng)很接近官方版本了。雖然目前這個(gè)是很多人造過(guò)的輪子，但是可能每個(gè)人的實(shí)現(xiàn)方式都不一樣，自己寫(xiě)一遍也會(huì)有許多收獲。 項(xiàng)目地址 預(yù)覽地址 api：ap使用的是一個(gè)開(kāi)源的nodejs封裝的網(wǎng)易云音樂(lè)api，地址 技術(shù)棧 vue...
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對(duì)和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁(yè)新曲等使用了做單頁(yè)應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對(duì)android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
閱讀 2821·2021-11-16 11:44
閱讀 981·2021-10-09 09:58
閱讀 4507·2021-09-24 09:48
閱讀 4388·2021-09-23 11:56
閱讀 2416·2021-09-22 15:48
閱讀 1907·2021-09-07 10:07
閱讀 3213·2021-08-31 09:46
閱讀 519·2019-08-30 15:56
