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

時間 2019-11-07

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

原文原文鏈接

前言

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

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

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

項目目標

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

項目還在編寫完善中github

上一次更新(2019-11-6)： ~~視頻播放功能基本實現~~面試

最近一次更新(2019-11-7)： 朋友頁面開始vuex

版本更新

版本信息： 2.2.4 -> 2.3.5
時間： 2019 年 11 月 6 日
更新內容：
- 增長視頻頁面視頻播放功能
- 修復每日推薦頁面登錄狀態獲取異常
- 修復視頻播放時側邊欄展現異常

歷史版本查看npm

使用中有任何問題或建議，歡迎 Issue！api

本項目在不斷完善中，請你們拭目以待~瀏覽器

技術棧

主要依賴

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

效果演示

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

目標功能

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

部分截圖

側邊帳戶中心

電臺相關

視頻頁面

發現頁面&每日推薦

歌單&歌單詳情

排行榜&排行榜信息

個人頁面&最近播放

個人歌單&播放歌曲

搜索展現

啓動步驟

查看源碼點擊查看源碼

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
複製代碼