高仿網易雲音樂(Vue實例)—Vue實戰

前言

隨着不斷的學習Vue，需要做一個小項目通過在實現項目過程中瞭解到更多的知識。隨着如今人們對於音樂的需求，移動端的使用量愈發增加，項目通過Vue編寫實現，全面借用網易雲音樂移動端的UI設計、功能實現，努力做到以假亂真的效果。前幾天便着手開始弄了,到今天爲止也算是勉強能用了。

本項目自行構思得出，由個人獨立編寫程序研究。

注：此項目純屬個人瞎搞，正常使用請選擇網易雲音樂官方客戶端。

項目目標

全面實現移動端網易雲音樂的功能

項目還在編寫完善中

上一次更新： 私人FM

最近一次更新： 歌手分類

技術棧

主要依賴

• Vue 全家桶(使用 Vue-cli 作爲構建工具)
• WebPack4.0
• ES6
• Less
• ESLint
• ElementUI
• 網易雲音樂API

效果演示

查看效果點擊 查看效果【使用Chrome瀏覽器效果更佳】

目標功能

• [x] 手機登錄、註冊
• [x] 修改密碼
• [x] 我的頁面歌單信息
• [x] 添加，刪除歌單
• [x] 最近播放
• [x] 心動模式
• [x] 我的電臺
• [x] 我的收藏
• [x] 發現頁面推薦歌單
• [x] 發現頁面新碟
• [x] 發現頁面新歌
• [x] 發現頁面每日推薦
• [x] 發現頁面歌單
• [x] 歌單廣場
• [x] 新歌推薦
• [x] 更多新碟
• [x] 發現頁面排行榜
• [ ] 發現頁面電臺
• [x] 發現頁面私人FM
• [x] 搜索功能
• [x] 搜索結果展示
• [x] 熱搜榜
• [x] 歷史記錄
• [x] 搜索推薦
• [x] 歌手分類
• [x] 播放功能(小播放器進度條)
• [x] 播放列表
• [ ] 添加刪除播放列表
• [ ] 歌曲mv播放
• [ ] 簽到
• [ ] 歌曲喜歡與否
• [ ] 專輯收藏與否
• [ ] 相關評論
• [ ] 用戶相關
• [ ] 用戶設置
• [ ] 頁面滾動加載
• [ ] 左右滑動切換
• [ ] 頁面切換動畫
• [ ] 登陸情況判斷
• [ ] 全面優化&修復

部分截圖

側邊賬戶中心

發現頁面&每日推薦

歌單&歌單詳情

排行榜&排行榜信息

我的頁面&最近播放

我的歌單&播放歌曲

搜索展示

啓動步驟

查看源碼點擊 查看源碼

1. npm install
2. npm run dev (本地開發)
3. npm run build (生產環境打包)

項目佈局

.src
+-- api
|   +-- config.js // 存取相關的api地址
|   +-- index.js // 請求相關的api方法
+-- assets
|   +-- styles
    |   +-- border.css // 移動端的1px邊框
    |   +-- global.less // 全局應用樣式
    |   +-- reset.css // 重置樣式
    |   +-- resetEleUI.less // 修改elementUI組件樣式
|   +-- utils // 全局要使用的方法
    |   +-- getPhone // 獲取手機號碼
    |   +-- modalScroll // 處理移動端滾動條
|   +-- Bus.js // Bus 總線
|   +-- Mixins.js // 混入(mixin)
+-- base // 存取頁面公共的小組件
    +-- albumPage // 歌單展示頁面組件
    +-- songListPage // 展示歌曲列表
    +-- alert // 提示消息
    +-- audioAllTitle // 播放全部標題行
    +-- button // 登陸頁面按鈕
    +-- djSublistCard // 類似於我的電臺頁面的長卡片組件
    +-- generalNav // 通用頁面頂部的標題行
    +-- icon // 圖標展示
    +-- idxCard // 官方排行榜
    +-- imgCard // 歌單的圖片卡
    +-- interchangeable // 用來展示搜索展示頁面除單曲以外的項目
    +-- loading // 轉圈loading
    +-- pageErrorInfo // 出錯提醒
    +-- pageErrorLoading // 頁面加載loading
    +-- searchInput // 搜索框
    +-- slider // 播放列表滑塊
    +-- sliderNav // 滑動標題
    +-- song // 歌曲項
    +-- titleFooter // 搜索展示頁綜合頁面各項通用頭和尾
+-- getInfos // 獲取一些靜態信息
    +-- getData // 獲取靜態信息方法
    +-- icon // 存取圖標信息
+-- pages // 項目路由頁面
+-- router // 路由配置
    +-- index
+-- store // vuex 配置使用
    +-- action // 根級別的 action
    +-- getter // 根級別的 getter
    +-- index // 組裝模塊並導出 store 的地方
    +-- mutation-types // 根級別的 mutation-types
    +-- mutation // 根級別的 mutation
    +-- state // 根級別的 state

查看源碼歡迎star，歡迎issue

後期我會在博客更新項目開發過程中遇到的坑，學習到的新知識，新方法等。歡迎關注

本項目會長期更新，歡迎大家指出問題，共同學習

---

希望對讀完本文的你有幫助、有啓發，如果有不足之處，歡迎批評指正交流！

歡迎關注我的個人博客分享一些前端技術、面試題、面試技巧等

辛苦整理良久，還望手動點贊鼓勵~