成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue全家桶構(gòu)建網(wǎng)易云音樂web app

劉厚水 / 2816人閱讀

摘要：前言使用構(gòu)建的移動(dòng)端網(wǎng)頁有搜索播放和歌單功能。整體就是網(wǎng)易云音樂官網(wǎng)的，部分組件用到了。播放功能就一個(gè)組件沒寫多帶帶頁面，用的是原生的。爬取網(wǎng)易云音樂的地址。

前言 使用vue cli3構(gòu)建的SPA移動(dòng)端網(wǎng)頁,有搜索、播放、和歌單功能。 整體UI就是網(wǎng)易云音樂官網(wǎng)的，部分組件用到了vux。播放功能就一個(gè)組件沒寫多帶帶頁面，用的是原生的H5。 
爬取網(wǎng)易云音樂的api地址。
在線預(yù)覽

點(diǎn)擊這里預(yù)覽，PC端推薦在chrome調(diào)試模式下預(yù)覽，手機(jī)端直接點(diǎn)擊鏈接。

網(wǎng)頁效果截圖：

源碼解析

src目錄解析：

│  App.vue
│  main.js
│  router.js
│
├─api //api配置文件夾
│      common.js
│      config.js
│
├─assets //靜態(tài)圖片資源
│      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 //歌單頁

技術(shù)棧：vuex vue-router vux(UI庫) axios

新手學(xué)vue，代碼肯定有很多糟糕的地方.如果不嫌棄可以給個(gè)Star
github項(xiàng)目地址，前端小江

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108644.html

相關(guān)文章

  • Vue全家桶高仿網(wǎng)易云音樂mac客戶端版（不像賠十個(gè)?。。?/b>

    摘要：庫用了魔改樣式的歌詞滾動(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ù)覽地址 源碼地址...

    mgckid 評論0 收藏0

  • Vue.js全家桶低仿網(wǎng)易云音樂(MacOS版) 已新增electron打包pc平臺app

    摘要：項(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...

    leap_frog 評論0 收藏0

  • Vue.js全家桶低仿網(wǎng)易云音樂(MacOS版) 已新增electron打包pc平臺app

    摘要：項(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...

    graf 評論0 收藏0

發(fā)表評論

0條評論

劉厚水

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<