前言

你好，我是 Loui，一个经历了两次高考 0 分的准大专生，靠兴趣学了一点前端，这是我做的第一个比较完整的前端项目，开源出来供大家批评，就当抛砖引玉了。

项目介绍

项目名称就叫【React 高仿酷我音乐 PC 端】，是我用两周时间、完全仿照酷我音乐 PC 端网站做的，采用 GPL v3 开源协议。

目前已经实现了酷我音乐 PC 端网站的全部页面及大部分功能，项目的所有数据均同步获取自酷我音乐官网接口🥳

支持播放歌曲和 MV（不是破解，只能播放免费的），具有完整的歌曲播放逻辑，支持滚动歌词、上一首、下一首、单曲循环、列表循环、顺序播放、音量调节等，还可以查看排行榜、搜索歌曲/专辑/歌单/MV/歌手、查看相应的详情、获取相应的评论等。

👉开源地址：github.com/ThisIsLoui/…

👉演示网站：mock-kuwo.dynv6.net/

(演示网站做了一点限流处理，频繁切换页面的话接口容易请求失败)

如果你对这个项目感兴趣的话，点个免费的 star 支持一下呗 🤪

技术栈

这个项目使用 TS 编写💪，采用了如下技术栈：

• 基础框架：React
• 打包工具：Vite
• 样式：CSS Modules + SCSS + classnames 库
• 路由：React Router
• 状态管理：Redux (with Toolkit) + Redux Persist
• 网络请求：RTK Query + Axios
• 前端规范化：Eslint + Prettier + Stylelint + husky + lint-staged + commitlint
• 其他用到的一些库：swiper、react-icons、react-paginate、react-use-audio-player、video.js、ahooks 等

路由列表

/：首页推荐

/rankList：排行榜

/singerList：歌手列表

/playList：歌单列表

/mvList：MV列表

/singer/:id：歌手详情_单曲

/singer/:id/album：歌手详情_专辑

/singer/:id/mv：歌手详情_MV

/singer/:id/info：歌手详情_简介

/album/:id：专辑详情

/play/:id：歌单详情

/song/:id：歌曲详情

/mvplay/:id：MV详情

/search?key=xxx&type=xx：搜索

接口说明

这个项目的接口收集、整理自酷我音乐官网的公开接口，具体使用了哪些接口可以 查看接口文档。

这些接口不一定长期有效，如果发现接口已经失效，网站内容无法正常获取、显示，可以提 issues 通知我📢。

部署教程

写在最后

这个项目当中一定会有很多不足的地方，由于后端接口是从酷我音乐官网整理来的，不能全面地知晓后台在不同情况下会返回哪些数据，因此无法全面地处理各种 edge cases，还请谅解。

开源不易，如果你对这个项目感兴趣的话，点个免费的 star 支持一下呗 🤪

开源不易，如果你对这个项目感兴趣的话，点个免费的 star 支持一下呗 🤪

开源不易，如果你对这个项目感兴趣的话，点个免费的 star 支持一下呗 🤪