大家好，我是 Java陳序員。
今天，給大家安利一個高仿網易雲 PC 端的開源專案，介面精美、功能豐富！
關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。
專案介紹
vue3-cloud-music —— 一個主要基於 Vue3 + TypeScript + Vite 構建的高仿網易雲 PC 端的音樂流媒體網站。
功能特色：
- 相容夜間模式，骨架屏載入顯示
- 基於圖片主色混入的 canvas 漸變背景
- 歌曲支援隨機、順序、單曲迴圈播放
- 自定義封裝歌曲進度條，可點選拖拽切換到指定播放時間，新增 buffer 載入進度顯示
- 歌詞自動同步滾動高亮，滾動選擇歌詞切換播放時間
- 歌詞底部頭部基於當前所在滾動位置背景色新增虛化漸變遮罩
- 歌曲播放或暫停時 CD 旋轉或停止旋轉
- 支援歌單內部搜尋歌曲、收藏歌單、編輯歌單、新建歌單
- 搜尋歌曲或歌單，提供搜尋建議、搜尋歷史記錄快取
- 支援掃碼登入、編輯使用者資訊、簽到、退出登入
- 支援新增喜歡的音樂，獲取我建立的歌單和收藏的歌單
- 記憶當前滾動位置，重新整理頁面時更新滾動位置
- MV 列表，支援播放 MV
- 評論列表，支援點選評論、回覆評論、新增評論、發表評論
技術棧：
- Vue3
- Vite
- Pinia
- Naive UI
- tailwindcss
- xgplayer
專案截圖
專案執行
推薦 Node 版本 14.18+/16+,推薦使用 pnpm 安裝依賴！
1、拉取程式碼
git clone https://github.com/path-yu/vue3-cloud-music.git
2、安裝依賴
pnpm install
3、執行
pnpm run dev
4、構建
pnpm run build
專案地址：https://github.com/path-yu/vue3-cloud-music
線上體驗：https://cloud-music-eight-nu.vercel.app/#/discovery
最後
推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：
https://github.com/chenyl8848/great-open-source-project
或者訪問網站，進行線上瀏覽：
https://chencoding.top:8090/#/
大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！