<br /> <p align="center"> <a href="http://guowei.fun" target="blank"> <img src="img/logo.png" alt="Logo" width="156" height="156"> </a> <h2 align="center" style="font-weight: 600">BeeMusic</h2> <p align="center"> 高颜值的第三方网易云播放器 <br /> <a href="http://miyagi-jiye.gitee.io/vite3-vue3.2-wyy-music" target="blank"> <strong>🌎 访问DEMO</strong> </a> <br /> Tip : 如访问数据加载失败请查看链接是否为 http </p> </p> ## ✨ 特性 - ✅ 使用 Vue.js 全家桶开发 - 🔴 网易云账号登录（扫码/手机登录） - 📺 支持 MV 播放 - 📃 支持歌词显示 - 📻 支持私人 FM / 每日推荐歌曲 - 🚫🤝 无任何社交功能 - ✔️ 每日自动签到（手机端和电脑端同时签到） - 🌚 Light/Dark Mode 自动切换 - 📱 移动端适配 - 🛠 更多特性开发中 ## 🖼️ 截图 <div style="display:flex;flex-direction:column;gap:10px;"> <img src="img/discover.png" alt="截图" width="auto" height="auto"> <img src="img/albumDetail.png" alt="截图" width="auto" height="auto"> <img src="img/altistDetail.png" alt="截图" width="auto" height="auto"> <img src="img/artist.png" alt="截图" width="auto" height="auto"> <img src="img/login.png" alt="截图" width="auto" height="auto"> <img src="img/loginAfter.png" alt="截图" width="auto" height="auto"> <img src="img/loginAfter1.png" alt="截图" width="auto" height="auto"> <img src="img/lyricPlayer.png" alt="截图" width="auto" height="auto"> <img src="img/music.png" alt="截图" width="auto" height="auto"> <img src="img/playList.png" alt="截图" width="auto" height="auto"> <img src="img/playlistDetail.png" alt="截图" width="auto" height="auto"> <img src="img/recommend.png" alt="截图" width="auto" height="auto"> <img src="img/search.png" alt="截图" width="auto" height="auto"> <img src="img/searchDetail.png" alt="截图" width="auto" height="auto"> <img src="img/searchDetail1.png" alt="截图" width="auto" height="auto"> <img src="img/userDetail.png" alt="截图" width="auto" height="auto"> <img src="img/userDetail1.png" alt="截图" width="auto" height="auto"> <img src="img/userDetail2.png" alt="截图" width="auto" height="auto"> <img src="img/video.png" alt="截图" width="auto" height="auto"> <img src="img/videoDetail.png" alt="截图" width="auto" height="auto"> </div> ## 😀快速开始 运行本项目 ```shell # 安装依赖 npm install # 运行（网页端） npm run dev # 运行（electron），需要先运行网页端 npm run electron ``` ## 📦️ 打包成 windows 安装包 1. 编译打包 ```sh npm run build npm run packager ``` 2. 打包完成后，会在 `outputs` 目录下生成 `BeeMusic.exe` 安装包，直接双击即可使用 ## ⚙️ 部署到自己的服务器 1. 部署网易云 API，详情参见 [Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) 2. 克隆本仓库 ```sh git clone --recursive https://gitee.com/miyagi-jiye/vite3-vue3.2-wyy-music.git ``` 3. 安装依赖 ```sh npm install ``` 4. （可选）使用 Nginx 反向代理 API，将 API 路径映射为 `/api`，如果 API 和网页不在同一个域名下的话（跨域），会有一些 bug。 5. 修改 `src/axios/index.js` 生产环境API地址里面的值为你部署的网易云 API 地址。本地开发的话可以填写 API 地址为 `http://localhost:3000/`。。 ```js // 本地环境 axios.defaults.baseURL = 'http://localhost:3000/'; // 线上环境 axios.defaults.baseURL = '可更换为你部署的API服务器地址'; ``` 6. 编译打包 ```sh npm run build ``` 7. 将 `/dist` 目录下的文件上传到你的 Web 服务器 ## 💻: 配置开发环境 本项目由 [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) 提供 API。 ## ☑️ Todo 1. [ ] 歌词翻译切换 2. [ ] 主题自定义换肤 3. [x] 移动端适配 欢迎提 Issue 和 Pull request。 ## 📜 开源许可 本项目仅供个人学习研究使用，禁止用于商业及非法用途。 基于 [MIT license](https://opensource.org/licenses/MIT) 许可进行开源。 ## 灵感来源 API 源代码来自 [Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) - [QQ音乐](https://y.qq.com) - [网易云音乐](https://music.163.com)