{"id":13536447,"url":"https://github.com/Panda-Hope/vue-qqmusic","last_synced_at":"2025-04-02T03:30:47.675Z","repository":{"id":215851341,"uuid":"91589575","full_name":"Panda-Hope/vue-qqmusic","owner":"Panda-Hope","description":"Vue全家桶+Mint-Ui打造高仿QQMusic，搭配详细说明","archived":false,"fork":false,"pushed_at":"2018-03-05T14:05:51.000Z","size":1999,"stargazers_count":478,"open_issues_count":4,"forks_count":177,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-11-03T01:33:12.870Z","etag":null,"topics":["mint-ui","mobile-app","qqmusic","vue"],"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/Panda-Hope.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}},"created_at":"2017-05-17T15:04:12.000Z","updated_at":"2024-07-16T00:28:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"e418fa25-61d2-4704-89df-256e48931ceb","html_url":"https://github.com/Panda-Hope/vue-qqmusic","commit_stats":null,"previous_names":["panda-hope/vue-qqmusic"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Panda-Hope%2Fvue-qqmusic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Panda-Hope%2Fvue-qqmusic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Panda-Hope%2Fvue-qqmusic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Panda-Hope%2Fvue-qqmusic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Panda-Hope","download_url":"https://codeload.github.com/Panda-Hope/vue-qqmusic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750859,"owners_count":20827792,"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":["mint-ui","mobile-app","qqmusic","vue"],"created_at":"2024-08-01T09:00:39.548Z","updated_at":"2025-04-02T03:30:47.669Z","avatar_url":"https://github.com/Panda-Hope.png","language":"Vue","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"readme":"## Vue-QQMusic\n#### 简介：\n最近有点小闲置，于是乎希望写点东西，正好自己喜欢听歌，便决定自己写一个QQ音乐的简易版。\n顺便进一步加深下自己对移动端的知识。我会在每个核心组件和部分都加下注解大致说明原理，争取提供一个良好的代码阅读环境，在注视部分是采用英文写的，请原谅我撇脚的英语o(╯□╰)o，欢迎大家给我提出更好的意见( *︾▽︾)\n\n#### 原理简介：\n首先这里通过Jsonp来进行跨域获取QQ音乐API数据，在[API Hanler](https://github.com/Panda-Hope/vue-qqmusic/blob/master/src/api/index.js)对API进行处理导出统一的方法来获取数据。 \n核心文件则是在[Store](https://github.com/Panda-Hope/vue-qqmusic/blob/master/src/store/index.js),在这里使用Vuex统一管理页面切换动画，歌曲播放状态，歌曲进度等信息。所有对于歌曲的操作都通过Vuex来进行全局管理，然后对相应的变化做出全局改变。\n\n## 技术栈\n- Vue全家桶（使用Vue-cli作为构建工具）\n- Webpack\n- Mint-Ui\n- Es6\n- Sass\n- Velocity, AlloyTouch等第三方库\n\n## 运行演示\n#### 线上地址：[Vue-QQMusic](https://panda-hope.github.io/)\n#### 移动端请扫描下面二维码：\n![二维码](https://github.com/Panda-Hope/panda-hope.github.io/blob/master/gif/qrcode.png)\n#### 运行截图：\n\u003cdiv align=\"space-between\"\u003e\n \u003cimg src=\"https://github.com/Panda-Hope/panda-hope.github.io/blob/master/gif/music1.gif\" width=\"375\" height=\"667\"\u003e\n \u003cimg src=\"https://github.com/Panda-Hope/panda-hope.github.io/blob/master/gif/music2.gif\" align=\"right\" width=\"375\" height=\"667\"\u003e\n\u003c/div\u003e\n\n## 项目组件\n- [x] 首页 -- 完成\n- [ ] 电台 -- 无法获取电台API\n- [X] 歌手信息 -- 完成\n- [X] 歌手列表 -- 完成\n- [x] 歌曲排行 -- 完成\n- [x] 歌曲列表 -- 完成\n- [x] 热门推荐 -- 完成\n- [x] 歌曲搜索 -- 完成\n- [x] 歌曲播放 -- 完成\n- [x] 底部固定歌曲播放条 -- 完成\n\n## 项目结构 ##\n```\n\n|-- build // webpack配置文件\n|-- config // 项目打包路径\n|-- src // 源码目录 \n| |-- api // QQ音乐Api分析文件\n| |-- index.js \n| |-- assets // 图片资源文件\n| |-- components // 组件\n| |-- fallback.vue // 公用后退组件\n| |-- header.vue \t // 重写Mini-Ui头部组件，来实现更多效果\n| |-- index.vue // 首页界面\n| |-- list.vue // 公用歌曲列表组件\n| |-- lyrics.vue // 歌词组件\n| |-- play-fixed.vue // 底部固定歌曲播放组件\n| |-- playing.vue // 歌曲播放页面\n| |-- radio.vue // 电台界面\n| |-- ranklist.vue // 歌曲排行榜界面\n| |-- recommend.vue // 推荐歌曲界面\n| |-- search.vue // 搜索界面\n| |-- singer.vue // 歌手界面\n| |-- singerlist.vue // 歌手列表界面\n| |-- slider.vue // 歌词滑动组件\n| |-- special.vue // 特殊界面用于使用Iframe包含封面等QQ音乐原生界面\n| |-- toplist.vue // QQ音乐巅峰榜界面\n| |-- mixin // 全局mixin方法\n| |-- index.js \n| |-- router // Vue 路由\n| |-- index.js\n| |-- sass // css文件夹，采用Sass进行预编译\n| |-- packages // Mint-Ui文件夹，覆盖Mint-Ui原有样式\n| |-- cell.scss\n| |-- header.scss\n| |-- index.scss\n| |-- navbar.scss\n| |-- search.scss\n| |-- themes // APP主题CSS，未来将增加主题切换功能\n| |-- index.scss\n| |-- transition // 全局公用Transition, Animation\n| |-- index.scss\n| |-- dimension.scss // 阿里SUI, Rem屏幕适应变化css(暂未使用)\n| |-- index.scss // Sass 入口文件\n| |-- mixins.scss // Sass 公用全局Mixin\n| |-- normalize.scss // Normalize.css\n| |-- page.scss // 页面布局css\n| |-- scaffold.scss // scaffold css 设置基本全局样式\n| |-- util.scss // 公用全局Sass组件\n| |-- var.scss // 全局Sass变量，这里使用sass-resources-loader向全局注入Sass变量\n| |-- store // Vuex Store文件，APP核心所在\n| |-- index.js \n| |-- util // 全局公用函数\n| |-- index.js \n| |-- App.vue // App入口文件\n| |-- filter.js // 注册全局Vue filter\n| |-- main.js // 程序入口文件，加载Vuex,Vue-router等插件\n| |-- mintUi.js // Mint-Ui配置文件\n| |-- test // 测试目录，暂未使用\n|-- .babelrc // ES6语法编译配置\n|-- .editorconfig // 代码编写规格\n|-- .eslintignore // Eslint 忽略的文件\n|-- .eslintrc.js // EsLint 配置暂未使用 \n|-- .gitignore // git ingnore\n|-- .postcssrc.js // post css 配置文件\n|-- README.md // README\n|-- index.html // 入口html文件\n`-- package.json // 项目及工具的依赖配置文件\n\n```\n\n## Build Setup\n\n``` bash\n# download\ngit clone https://github.com/Panda-Hope/vue-qqmusic\n\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# run unit tests\nnpm run unit\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPanda-Hope%2Fvue-qqmusic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPanda-Hope%2Fvue-qqmusic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPanda-Hope%2Fvue-qqmusic/lists"}