{"id":13535741,"url":"https://github.com/microzz/vue-music-player","last_synced_at":"2025-04-04T18:07:05.549Z","repository":{"id":53919258,"uuid":"84845268","full_name":"microzz/vue-music-player","owner":"microzz","description":"🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js","archived":false,"fork":false,"pushed_at":"2017-09-25T03:02:36.000Z","size":10291,"stargazers_count":735,"open_issues_count":13,"forks_count":199,"subscribers_count":41,"default_branch":"2.0.0","last_synced_at":"2025-03-28T17:07:58.710Z","etag":null,"topics":["axios","css3","html5","localstorage","sass","scss","vue","vue-router","vue2","vuejs","vuejs2","vuex","webpack"],"latest_commit_sha":null,"homepage":"https://microzz.com/vue-music/","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/microzz.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":"2017-03-13T15:50:07.000Z","updated_at":"2025-02-04T16:16:33.000Z","dependencies_parsed_at":"2022-08-13T04:20:14.959Z","dependency_job_id":null,"html_url":"https://github.com/microzz/vue-music-player","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-music-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-music-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-music-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-music-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microzz","download_url":"https://codeload.github.com/microzz/vue-music-player/tar.gz/refs/heads/2.0.0","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226213,"owners_count":20904465,"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":["axios","css3","html5","localstorage","sass","scss","vue","vue-router","vue2","vuejs","vuejs2","vuex","webpack"],"created_at":"2024-08-01T09:00:25.070Z","updated_at":"2025-04-04T18:07:05.524Z","avatar_url":"https://github.com/microzz.png","language":"Vue","funding_links":[],"categories":["Vue","UI组件"],"sub_categories":[],"readme":"# Vue.js音乐播放器2.0升级版\n之前初学Vue做了一个音乐播放器，受到不少人的喜欢。现在升级版来了！功能更强，技术栈更多。\n\n## 源代码\n源代码地址：👉 [GitHub](https://github.com/microzz/vue-music-player)\n欢迎大家star和follow😄\n\n## 预览\n### 在线预览\n在线预览地址：👉 [Vue音乐播放器](https://microzz.com/vue-music/)\n\n### 预览图\n![Vue音乐播放器升级版 - microzz.com](https://github.com/microzz/preview/blob/master/vue_music_player/preview.gif?raw=true)\n\n更多预览图请看👉 [更多](https://github.com/microzz/preview/tree/master/vue_music_player)\n\n## 技术栈\n**Vue2**：采用最新Vue2的语法😁\n\n**Vuex**：实现不同组件之间的状态共享✌️\n\n**vue-router**：单页应用路由管理必备😎\n\n**axios**：发起http请求😉\n\n**SASS(SCSS)**：css预处理语言💪\n\n**Express**(上线版本是**Koa2**)：因为vue-cli是用的Express做服务器，所以开源的开发版本是Express，自己生产环境用的是Koa2。 😜\n\n**Webpack**：自动化构建工具，大部分配置vue-cli脚手架已经弄好了，很方便。😏\n\n**ES6**：采用ES6语法，这是趋势。👏\n\n**localStorage(HTML5)**：本地存储，保存用户个性化设置。😊\n\n**CSS3**：CSS3动画及样式。👍\n\n## 使用 Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\n## 遇到的问题\n1. vuex什么时候使用，如何使用，就要看项目需要。引用 Redux 的作者 Dan Abramov 的话说就是：\n\n  \u003e Flux 架构就像眼镜：您自会知道什么时候需要它。\n\n  各组件之间状态共享也是难点。\n\n2. 异步编程：JS是单线程，异步编程尤为重要。当我们向后端请求数据，是异步的，如果没有处理好相关的异步操作，是会有各种问题的。JS可以利用`setTimeout`、`回调`、`Generator`、`Promise`、`Async`。\n定时这种方式太麻烦，还是不推荐；回调层次多了，有回调地狱，代码维护性很差；Generator需要手动去执行，当然可以使用类似`co`的模块。相比之下`Promise`和`Async`是比较理想的。(详看👉[Promise对象](https://microzz.com/2017/01/14/promise/)、[异步操作和Async函数](https://microzz.com/2017/01/15/async/))\n3. 本项目中使用了QQ音乐和One(一个)的接口，后端API编写也是难点，包含了各种异步请求。对返回数据的解析也是难点，有的时候你还需要对数据进行解码。\n4. 各组件结构的设计：一开始大纲没设计好，后面想修改涉及面会很广。\n5. 过渡动画让交互更有趣，但是有的还是耗性能的，有设备差异，没用好会造成卡顿。\n\n【声明】：本项目仅供学习交流，请不要用做任何商业用途😊有任何疑问请联系作者📩[zhaohui@microzz.com](mailto:zhaohui@microzz.com)\n\n## About\n源代码地址：👉 [GitHub](https://github.com/microzz/vue-music-player)\n\n个人网站：🔗[microzz-IT技术分享](https://microzz.com/)\n\nGitHub：🔗[microzz](https://github.com/microzz)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fvue-music-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrozz%2Fvue-music-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fvue-music-player/lists"}