資訊專欄INFORMATION COLUMN
摘要：前言使用構建的移動端網頁有搜索播放和歌單功能。整體就是網易云音樂官網的，部分組件用到了。播放功能就一個組件沒寫多帶帶頁面，用的是原生的。爬取網易云音樂的地址。
前言 使用vue cli3構建的SPA移動端網頁,有搜索、播放、和歌單功能。 整體UI就是網易云音樂官網的，部分組件用到了vux。播放功能就一個組件沒寫多帶帶頁面，用的是原生的H5。
爬取網易云音樂的api地址。在線預覽
點擊這里預覽，PC端推薦在chrome調試模式下預覽，手機端直接點擊鏈接。
網頁效果截圖：
源碼解析src目錄解析：
│ App.vue
│ main.js
│ router.js
│
├─api //api配置文件夾
│ common.js
│ config.js
│
├─assets //靜態圖片資源
│ find.svg
│ hot_bg.jpg
│ hot_icon.png
│ play.png
│
├─components
│ ├─HomeBottom //主頁底部組件
│ │ foot.svg
│ │ footbg.png
│ │ index.vue
│ │
│ ├─HomeTop //主頁頭部組件
│ │ index.vue
│ │ logo.svg
│ │
│ ├─HotWord //熱門搜索詞
│ │ index.vue
│ │
│ ├─MusicPlayer //播放器組件
│ │ index.vue
│ │
│ ├─RecommendList //推薦歌單
│ │ index.vue
│ │
│ ├─SongItem //歌曲組件
│ │ index.vue
│ │
│ ├─TabIndex //tab的首頁
│ │ index.vue
│ │
│ ├─TabRank //tab的排行榜頁
│ │ index.vue
│ │
│ └─TabSearch //tab的搜索頁
│ index.vue
│
├─store //vuex
│ actions.js
│ getters.js
│ index.js
│ mutation-types.js
│ mutations.js
│ state.js
│
├─styles
│ playlist_page.css
│ remd_list.css
│ song_item.css
│
└─views
HomePage.vue //主界面
PlayListPage.vue //歌單頁
技術棧：vuex vue-router vux(UI庫) axios
新手學vue，代碼肯定有很多糟糕的地方.如果不嫌棄可以給個Star
github項目地址，前端小江
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108644.html
摘要：庫用了魔改樣式的歌詞滾動部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標準預處理器安裝與使用前端項目后端項目 音樂播放器雖然爛大街了，但是作為前端沒自己擼一個一直是個遺憾，而且偶然間發現pc端web版的網易云音樂做的實在是太簡陋了，社區仿pc客戶端的網易云也不多見，為了彌補這個遺憾，就用vue全家桶模仿mac客戶端的ui實現了一個，歡迎提出意見和star~ 預覽地址 源碼地址...
摘要：項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管 項目地址 暫時只實現了基本功能 加了一點微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點微?小的適配 現在已經包括了ele...
摘要：項目地址暫時只實現了基本功能加了一點微小的效果主要適配瀏覽器對和做了一點微小的適配現在已經包括了打包平臺的功能了源碼地址項目預覽項目描述前端部分整體加載進度懶加載模塊的加載中提示實現了滑塊增量分頁新曲等使用了做單頁應用使用了處理路由使用了管 項目地址 暫時只實現了基本功能 加了一點微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點微?小的適配 現在已經包括了ele...
閱讀 633·2021-11-24 09:39
閱讀 3478·2019-08-30 15:53
閱讀 2509·2019-08-30 15:44
閱讀 3237·2019-08-30 12:54
閱讀 2206·2019-08-29 12:23
閱讀 3304·2019-08-26 14:05
閱讀 2101·2019-08-26 13:36
閱讀 3429·2019-08-26 13:33
