{"id":25165848,"url":"https://github.com/hexianweb/vue-music","last_synced_at":"2026-02-06T02:32:09.958Z","repository":{"id":54265822,"uuid":"522109928","full_name":"hexianWeb/vue-music","owner":"hexianWeb","description":"移动端音乐 平台","archived":false,"fork":false,"pushed_at":"2022-10-07T03:20:08.000Z","size":27095,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-20T06:41:11.019Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/hexianWeb.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}},"created_at":"2022-08-07T03:49:31.000Z","updated_at":"2022-09-30T13:57:02.000Z","dependencies_parsed_at":"2023-01-19T14:17:08.483Z","dependency_job_id":null,"html_url":"https://github.com/hexianWeb/vue-music","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hexianWeb/vue-music","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexianWeb%2Fvue-music","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexianWeb%2Fvue-music/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexianWeb%2Fvue-music/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexianWeb%2Fvue-music/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hexianWeb","download_url":"https://codeload.github.com/hexianWeb/vue-music/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexianWeb%2Fvue-music/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29145854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T01:13:33.096Z","status":"online","status_checked_at":"2026-02-06T02:00:08.092Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-02-09T05:47:07.270Z","updated_at":"2026-02-06T02:32:09.938Z","avatar_url":"https://github.com/hexianWeb.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-Music\n\n\u003e **Vue3.0**构建移动端音乐APP\n\n[预览地址（点击我）](http://106.14.211.207:8080/hexianMusic/#/recommend)\n\n## 效果截图\n\n-----------------------\n\n### 效果一\n\n![](ReadMeImg/首页.gif)\n\n### 效果二\n\n![](ReadMeImg/歌手.gif)\n\n### 效果三\n\n![](ReadMeImg/歌曲.gif)\n\n### 效果四\n\n![](ReadMeImg/搜索.gif)\n\n\n\n## 技术栈\n\n------------------------------\n\n[前端]\n\n- `Vue`3.0：用于构建用户界面的 MVVM 框架。它的核心是**响应的数据绑定**和**组系统件**\n- `vue-router`：为单页面应用提供的路由系统，项目上线前使用了 `Lazy Loading Routes` 技术来实现异步加载优化性能\n- `vuex`：Vue 集中状态管理，在多个组件共享某些状态时非常便捷\n- `vue-lazyload`：第三方图片懒加载库，优化页面加载速度\n- `better-scroll`2.0：iscroll 的优化版，使移动端滑动体验更加流畅\n- `Sass(Scss)`：css 预编译处理器\n- `ES6`：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常好用\n\n【后端】\n\n- `Node.js`：利用 Express 起一个本地测试服务器（非本人原创，我只对其进行了部分修改） [源码地址]()\n- `axios`：服务端通讯。结合 Node.js 代理后端请求，抓取 QQ音乐(PC端)数据\n\n【自动化构建及其他工具】\n\n- `vue-cli`：Vue 脚手架工具，快速搭建项目\n- `eslint`：代码风格检查工具，规范代码格式\n- log4js: 日志输出与检查\n\n## 收获\n\n------------\n\n1. 总结出一套适用于 Vue项目的通用组件\n2. 总结了一套常用的 SCSS mixin 库\n3. 总结了一套常用的 JS 工具函数库\n4. 学会了如何在Vue中优雅的操作Dom来完成优秀的用户交互体验\n\n## 实现页面\n\n-----------------\n\n主要页面：播放器内核页、推荐页、歌单详情页、歌手页、歌手详情页、排行页、搜索页、添加歌曲页、个人中心页等。\n\n核心页面：播放器内核页\n\n### 推荐页\n\n顶部是一个轮播图组件,使用第三方库 swiper 辅助实现，下部分是一个歌单推荐列表，图片使用懒加载技术 `vue3-lazyload`,优化页面加载速度，给用户更好的体验。当数据未请求到时，显示`loading`组件\n\n#### 推荐页 -\u003e歌单详情页\n\n这个组件更加注重 UX，做了很多类原生 APP 动画，如下拉图片放大、跟随推动、ios 渐进增强的高斯模糊效果 `backdrop-filter` 等\n\n### 歌手页\n\n该组件不仅可以随大屏手势滑动，还可以利用右侧的`shortcut`滑动。而这里的图片同样使用了懒加载`vue3-lazyload`，以优化页面加载速度。\n\n#### 歌手页 -\u003e歌手详情页\n\n复用歌单详情页\n\n### 播放器内核页\n\n核心组件。用 `vuex` 管理各种播放时状态，播放、暂停等功能调用 [audio API](http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp)，其中绝大部分动画都来自`animate`库实现，底部的进度条组件则是由SVG绘制而成。\n\n播放模式有：顺序播放、单曲循环、随机播放，原理在后序会有进一步介绍。\n\n歌词显示样式使用了野库`lyric-parser`\n\n这里有它相关API介绍\n\n-------\n\n\u003e LyricParser[API相关介绍]( https://github.com/ustbhuangyi/lyric-parser )\n\n增加了当前播放列表组件，可在其中加入/删除歌曲。\n\n### 排行页\n\n普通组件，没什么好说的\n\n#### 排行页-\u003e歌单详情页\n\n复用歌单详情页，没什么好说的\n\n## 进一步补充\n\n歌单的状态会随着选择歌单播放状态变更而变更，比如从顺序播放切换到单曲播放则需要歌单由原来的顺序遍历，变为只播放一首。状态会贯穿整个应用。所以选择vuex集中管理歌单状态。并且将歌单分为基础歌单与播放歌单。基础歌单为默认顺序播放状态，播放歌单相当于基础歌单的`个性化`，会根据播放状态的不同而生成不同的歌单。\n\n## 本地安装与运行\n\n```bash\ngit clone https://github.com/hexianWeb/vue-music.git\ncd vue-music\nnpm install \nnpm run serve\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexianweb%2Fvue-music","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhexianweb%2Fvue-music","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexianweb%2Fvue-music/lists"}