vue實(shí)現(xiàn)網(wǎng)易云音樂(lè)純界面
更新時(shí)間：2022年07月09日 16:18:47 作者：Cloudmoon
這篇文章主要為大家介紹了vue實(shí)現(xiàn)網(wǎng)易云音樂(lè)純界面過(guò)程詳解，附含詳細(xì)源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
項(xiàng)目簡(jiǎn)介
使用 Vue Cli + Vue3 + Vant3 編寫(xiě)
【Github地址：github.com/cloudmoonoc…】
【網(wǎng)易云音樂(lè)接口地址：neteasecloudmusicapi.vercel.app】
使用姿勢(shì)
npm install npm run serve
項(xiàng)目結(jié)構(gòu)
- 存在部分問(wèn)題，在README中
├─public
└─src
├─Api (接口[未做])
│
├─assets
│ ├─icons (圖標(biāo))
│ └─images (圖片)
│ ├─Error
│ └─Found
│
├─components (組件)
│ ├─MyFooter (底部標(biāo)簽頁(yè))
│ ├─MyHeader (頂部標(biāo)題欄，包含側(cè)邊欄)
│ └─Tip (最底部提示)
│
├─pages (頁(yè)面)
│ ├─Attention (關(guān)注)
│ ├─CloudSquare (云村[未做，無(wú)接口])
│ ├─Error (404)
│ │
│ ├─Found (發(fā)現(xiàn)頁(yè))
│ │ ├─DailyRecommendation (每日推薦)
│ │ │
│ │ ├─DigitalAlbum (數(shù)字專輯)
│ │ │ ├─AlbumBuy (已購(gòu)[單曲])
│ │ │ ├─HotList (暢銷榜)
│ │ │ └─MusicLanguage (語(yǔ)種風(fēng)格館)
│ │ │
│ │ ├─FocusNewMusic (關(guān)注新歌[未做，調(diào)用數(shù)據(jù)后再做])
│ │ ├─MusicHouse (歌房[未做，無(wú)接口])
│ │ ├─MusicList (歌單[只有八個(gè)選項(xiàng)])
│ │ ├─PrivateFM (私人FM)
│ │ ├─RankingList (排行榜[未做，無(wú)接口])
│ │ └─SoundBook (有聲書(shū)[未做，無(wú)接口])
│ │
│ ├─Index (登錄[1])
│ │ └─PhoneSignIn [手機(jī)登錄](méi)
│ │
│ ├─MyIndex (我的)
│ │ ├─Buy (已購(gòu)[單曲])
│ │ ├─CloudPan (云盤(pán)[未做，無(wú)接口])
│ │ ├─Collection-Praise (收藏和贊)
│ │ ├─Friends (我的好友)
│ │ ├─Index-Podcast (我的播客[未做，無(wú)接口])
│ │ ├─Local-Download (本地/下載[未做，無(wú)接口])
│ │ ├─MusicBottle (音樂(lè)罐子[未做，無(wú)接口])
│ │ └─Rencently (最近播放)
│ │
│ ├─Podcast (播客[全部分類])
│ │ ├─AllCategories (全部分類)
│ │ ├─FM (廣播電臺(tái)[未做，無(wú)接口])
│ │ ├─MyPodCast (我的播客[未做，無(wú)接口])
│ │ ├─NightSleep (助眠解壓[未做，無(wú)接口])
│ │ ├─PodcastRankingList (排行榜[未做，無(wú)接口])
│ │ └─SoundBook (有聲書(shū)[未做，無(wú)接口])
│ │
│ └─Search (搜索)
│
├─routers (路由)
│
└─store (倉(cāng)庫(kù)[未做])
├─Attention
├─Found
├─modules
├─MyIndex
├─Podcast
└─Search
界面截圖
登錄頁(yè)
發(fā)現(xiàn)
播客
我的
關(guān)注
搜索
以上就是vue實(shí)現(xiàn)網(wǎng)易云音樂(lè)純界面的詳細(xì)內(nèi)容，更多關(guān)于vue 網(wǎng)易云音樂(lè)界面的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解
這篇文章主要為大家介紹了Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼
在日常開(kāi)發(fā)后端管理系統(tǒng)項(xiàng)目中,用于展示數(shù)據(jù)多會(huì)用表格進(jìn)行展示,下面這篇文章主要給大家介紹了關(guān)于vue3+elementplus基于el-table-v2封裝公用table組件的相關(guān)資料,需要的朋友可以參考下2023-12-12
如何解決el-checkbox選中狀態(tài)更改問(wèn)題
這篇文章主要介紹了如何解決el-checkbox選中狀態(tài)更改問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
本文主要介紹了在Vue中使用的一些常見(jiàn)混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對(duì)代碼進(jìn)行加固,需要的可以參考下2023-12-12
這篇文章主要介紹了Vue router安裝及使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04
開(kāi)發(fā)項(xiàng)目有一段時(shí)間了,隨著項(xiàng)目越來(lái)越大,打包的時(shí)間也相應(yīng)的變長(zhǎng)了,打包時(shí)的內(nèi)存也增多了,這時(shí)候產(chǎn)生了一個(gè)問(wèn)題,在發(fā)布項(xiàng)目的時(shí)候,會(huì)出現(xiàn)Vue熱更新出現(xiàn)內(nèi)存溢出的問(wèn)題,所以本文給大家介紹了Vue熱更新出現(xiàn)內(nèi)存溢出的解決方法,需要的朋友可以參考下2024-05-05
這篇文章主要為大家介紹了vue路由跳轉(zhuǎn)的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
不同場(chǎng)景下Vue中虛擬列表實(shí)現(xiàn)
虛擬列表用來(lái)解決大數(shù)據(jù)量數(shù)據(jù)渲染問(wèn)題,由于一次性渲染性能低,所以誕生了虛擬列表渲染,下面我們就來(lái)學(xué)習(xí)一下不同場(chǎng)景下Vue中虛擬列表是如何實(shí)現(xiàn)的吧2023-10-10