基於vue全家桶的移動端音樂web app

Vue · 發表 2019-02-15 11:08:45

摘要：這是一個基於 Vue2.x 和網易雲音樂 API 製作的移動端 web app 專案；由於是出於練習和實驗的目的，因此並非是網易雲音樂 app 的替代品，目前也沒有涵蓋全部的功能；該專案主要使用的一些工具有： webpack 和 webpack-dev-serve...

這是一個基於 Vue2.x 和網易雲音樂 API 製作的移動端 web app 專案；由於是出於練習和實驗的目的，因此並非是網易雲音樂 app 的 替代品 ，目前也沒有涵蓋全部的功能；

該專案主要使用的一些工具有：

webpack 和 webpack-dev-server
vue 全家桶
NeteaseCloudMusicApi 專案
axios
better-scroll
vue-lazyload
Iconfont
Muse-UI

github： github.com/xxf1996/vue…

線上地址： xiexuefeng.cc/app/music

使用須知

由於專案使用的 API 介面完全是基於 NeteaseCloudMusicApi 專案，因此需要事先啟動該專案作為介面伺服器（無論是本地還是雲上）；啟動好後修改 src/index.js 檔案中的 API 介面設定為實際使用的介面地址即可。

如何執行

安裝依賴

npm i
複製程式碼

開發

npm start
複製程式碼

預設埠為 8080 ；

打包釋出

npm run build
複製程式碼

預設打包路徑為 dist ；

功能說明

由於是針對移動端設計的 web app ，因此採用了 rem 佈局來適應移動端不同解析度的裝置；設計稿是基於 375px 寬度的裝置，仿照網易雲音樂 app 的頁面佈局和設計。目前製作的功能介面有：

登入頁面（偽）

為啥說是『偽』登入，因為這裡只是獲取使用者的 uid ，此後獲取到的資料都是一些 公開只讀 的資料，而涉及到真正改變使用者資訊的操作（如收藏，點贊，評論等等）都不能使用；其實 NeteaseCloudMusicApi 專案提供了與網易雲音樂 app 一樣的手機或郵箱登入的介面，但是由於我的目的不是製作替代品，只是練習專案和試驗一些功能，利用 uid 獲取一些『只讀』資料已經足夠了（況且還涉及到使用者密碼和安全問題）。

那麼如何查詢自己的網易雲音樂賬戶 ID 號呢？那就需要在網易雲音樂 PC 網頁端檢視自己的個人主頁，諸如 https://music.163.com/#/user/home?id=xxxxxxx ， id 後那串數字就是賬戶 ID 。