{"id":13533057,"url":"https://github.com/path-yu/vue3-cloud-music","last_synced_at":"2025-05-16T00:08:47.039Z","repository":{"id":40410900,"uuid":"474968846","full_name":"path-yu/vue3-cloud-music","owner":"path-yu","description":"基于Vue3+Vite+TypeScript+compositionApi+naiveui构建的精致的支持夜间模式网易云音乐流媒体网站webApp","archived":false,"fork":false,"pushed_at":"2025-05-05T03:59:51.000Z","size":1008,"stargazers_count":335,"open_issues_count":0,"forks_count":81,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-05T04:22:36.100Z","etag":null,"topics":["composition-api","eslint","media","music-player","naive-ui","nodejs","pinia","taliwindcss","typescript","vitejs","vue-router4","vue3"],"latest_commit_sha":null,"homepage":"https://cloud-music-eight-nu.vercel.app/#/discovery","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/path-yu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-03-28T11:19:22.000Z","updated_at":"2025-05-05T03:59:54.000Z","dependencies_parsed_at":"2023-10-04T09:34:52.261Z","dependency_job_id":"abffb472-80cd-4948-acad-e301d96c1061","html_url":"https://github.com/path-yu/vue3-cloud-music","commit_stats":{"total_commits":480,"total_committers":4,"mean_commits":120.0,"dds":0.04583333333333328,"last_synced_commit":"54d7d02277be8ac298a799355c5ab7881015863a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fvue3-cloud-music","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fvue3-cloud-music/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fvue3-cloud-music/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/path-yu%2Fvue3-cloud-music/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/path-yu","download_url":"https://codeload.github.com/path-yu/vue3-cloud-music/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","eslint","media","music-player","naive-ui","nodejs","pinia","taliwindcss","typescript","vitejs","vue-router4","vue3"],"created_at":"2024-08-01T07:01:16.167Z","updated_at":"2025-05-16T00:08:42.020Z","avatar_url":"https://github.com/path-yu.png","language":"Vue","funding_links":[],"categories":["List"],"sub_categories":["Other Projects Using NaiveUI"],"readme":"# cloud-music\n这是一个主要基于Vue3+TypeScript+Vite构建的高仿网易云pc端的音乐流媒体网站.\n\n### 前言\n\n为了探索最前沿的前端技术栈, 一切为了好玩, 肝代码不易,觉得喜欢的可以点个star,本项目仅供参考学习.\n谢谢大家star.\n\n### 常见问题\n由于网易云服务器限制,加上ffmpeg需要设置COOP和COEP 导致获取媒体资源和图片会存在跨域问题, 可以使用Allow CORS: Access-Control-Allow-Origin 这个插件来解决, 使用项目部署在vercel,导致需要使用vpn访问, 导致图片和音频可能无法加载, 在clash添加一条规则 将music.126.net, 类型选择DOMAIN-KEYWORD 域名设置成直连.\n### 项目部署\n\n本项目预览地址采用vercel部署, 推荐大家使用vercel部署, 部署步骤非常简单, fork本仓库,在vercel中导入该仓库,按照提示点击部署即可.\n\n\n### 主要技术栈如下\n\n1. [Vue3](https://vuejs.org/):  用于快速构建web用户界面的框架.\n\n2. [naive-ui](https://www.naiveui.com/zh-CN/light): 基于Vue3的组件库,可自定义主题,支持夜间模式.\n\n3. [Vite](https://vitejs.dev/): 下一代的前端构建工具,支持HRM,TypeScript,JSX,开箱即用.\n\n4. [axios](https://axios-http.com/): 是用于浏览器和node.js的基于Promise的http库,用于请求Api.\n\n5. [dayjs](https://day.js.org/): 轻量级,用于处理时间相关格式化问题的库.\n\n6. [color.js](https://www.npmjs.com/package/color.js): 用于不可变颜色的转换和操作的JavaScript库.\n\n7. [eslint](https://eslint.org/): 基于AST模式的JavaScript代码风格检查工具.\n\n8. [lodash](https://lodash.com/docs/): 实用JavaScript工具函数库,提供了类似防抖节流,深拷贝开箱即用的函数.\n\n9. [nanoid](https://github.com/ai/nanoid/blob/main/README.zh-CN.md): 小型的安全的,用于生成唯一字符串id的JavaScript库.\n\n10. [normalize.css](https://github.com/necolas/normalize.css): 一个用于现代化的重置css的库,用于磨平各个浏览器之间不同样式的兼容问题.\n\n11. [pinia](https://pinia.vuejs.org/): 基于Proxy使用TypeScript编写的灵活的且类型安全的下一代Vue状态管理库.\n\n12. [qs](https://www.npmjs.com/package/qs): 安全的用于字符串序列化的库,通常用于处理请求参数.\n\n13. [colorthief](https://www.npmjs.com/package/colorthief): 可以在浏览器和node中使用,用于从图像中提取主色.\n\n14. [vue-router4](https://router.vuejs.org/zh/introduction.html): 基于Vue3路由管理库\n\n15. [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller): 基于Vue的虚拟滚动JavaScript库.\n\n16. [xgplayer](https://v2.h5player.bytedance.com/): 西瓜播放器(HTML5),带解析器,能节省流量 提供开箱即用的HTML5视频播放器库\n\n17. [tailwindcss](https://tailwindcss.com/): 基于原子化css的实用程序优先的css框架,用于快速构建自定义用户界面.\n    \n    ## 功能亮点如下\n\n18. 基于图片主色混入的canvas渐变背景\n\n19. 歌曲随机,顺序,单曲循环播放.切换播放上一首,下一首.\n\n20. 自定义封装歌曲进度条,可点击拖拽切换到指定播放时间, 添加buffer加载进度显示.\n\n21. 歌词自动同步滚动高亮,滚动选择歌词切换播放时间, 歌词逐字播放.\n\n22. 歌词底部头部基于当前所在滚动位置背景色添加虚化渐变遮罩.\n\n23. 歌曲播放或暂停时cd旋转或停止旋转, 高度拟真cd.\n\n24. 兼容夜间模式,骨架屏加载显示.\n\n25. 歌单内部搜索歌曲,收藏歌单,编辑歌单,新建歌单.\n\n26. 添加喜欢的音乐,获取我创建的歌单和收藏的歌单.\n\n27. 歌单列表下拉加载.\n\n28. 自定义图片懒加载,缓冲loading显示.\n\n29. 扫码登录,编辑用户信息,签到.退出登录.\n\n30. 记忆当前滚动位置.刷新页面时更新滚动位置.\n\n31. 搜索歌曲或歌单,提供搜索建议.搜索历史记录缓存.\n\n32. mv列表,播放mv\n\n33. 评论列表,点击评论,回复评论,添加评论.发表评论\n\n34. 基于ffmpeg-wasm和IndexedDB缓存压缩歌曲数据到本地,实现离线快速播放.\n\n## 项目预览\n![](https://upload-images.jianshu.io/upload_images/24914540-3610a62506e089c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n![](https://upload-images.jianshu.io/upload_images/24914540-f75bd93f493a0630.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n![](https://upload-images.jianshu.io/upload_images/24914540-3037f3b2061af382.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n![](https://upload-images.jianshu.io/upload_images/24914540-33da12dc895b574a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n![](https://upload-images.jianshu.io/upload_images/24914540-282aa2c065314f7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n![](https://upload-images.jianshu.io/upload_images/24914540-6e666b06fa902d43.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n![](https://upload-images.jianshu.io/upload_images/24914540-1d77d01057781aaf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n![](https://upload-images.jianshu.io/upload_images/20032554-89d3aae105f66885.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n![](https://upload-images.jianshu.io/upload_images/20032554-e5898c2b509dabea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n## 项目运行\n\n推荐使用pnpm安装依赖，推荐node版本14.18+, 16+。\n建议使用nvm管理不同node版本，nvm安装前建议卸载当前已经安装的node。\n\n### nvm仓库\n\n在首页点击Releases进入版本页面，下载最新版本即可\nhttps://github.com/coreybutler/nvm-windows\n\n### pnpm 安装\n\n```shell\nnpm i pnpm -g\n```\n\n### 依赖安装\n\n```shell\npnpm i\n```\n\n### 运行\n\n```shell\npnpm dev\n```\n\n### 构建\n\n```shell\npnpm build\n```\n\n### 预览\n\n```shell\npnpm preview\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpath-yu%2Fvue3-cloud-music","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpath-yu%2Fvue3-cloud-music","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpath-yu%2Fvue3-cloud-music/lists"}