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

時間 2019-11-16

標籤高仿網易音樂 vue 實例實戰简体版

原文原文鏈接

前言

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

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

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

項目目標

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

項目還在編寫完善中

上一次更新(2019-10-21)： 優化git

最近一次更新(2019-10-22)： 喜歡歌曲github

技術棧

主要依賴

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] 退出登陸
[x] 發現頁面私人FM
[x] 搜索功能
[x] 搜索結果展現
[x] 熱搜榜
[x] 歷史記錄
[x] 搜索推薦
[x] 歌手分類
[x] 播放功能(小播放器進度條)
[x] 播放列表
[x] 添加刪除播放列表
[ ] 歌曲mv播放
[x] 簽到
[x] 歌曲喜歡與否
[x] 專輯收藏與否
[ ] 相關評論
[ ] 用戶相關
[ ] 用戶設置
[ ] 頁面滾動加載
[ ] 左右滑動切換
[ ] 頁面切換動畫
[ ] 登錄狀況判斷
[ ] 全面優化&修復

部分截圖

側邊帳戶中心

發現頁面&每日推薦

歌單&歌單詳情

排行榜&排行榜信息

個人頁面&最近播放

個人歌單&播放歌曲

搜索展現
vuex

啓動步驟

查看源碼點擊查看源碼npm

npm install
npm run dev (本地開發)
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，歡迎issueapi

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