Vue-QQMusic
简介：
最近有点小闲置，于是乎希望写点东西，正好自己喜欢听歌，便决定自己写一个QQ音乐的简易版。
顺便进一步加深下自己对移动端的知识。我会在每个核心组件和部分都加下注解大致说明原理，争取提供一个良好的代码阅读环境，在注视部分是采用英文写的，请原谅我撇脚的英语o(╯□╰)o，欢迎大家给我提出更好的意见( *︾▽︾)原理简介：
首先这里通过Jsonp来进行跨域获取QQ音乐API数据，在对API进行处理导出统一的方法来获取数据。
核心文件则是在,在这里使用Vuex统一管理页面切换动画，歌曲播放状态，歌曲进度等信息。所有对于歌曲的操作都通过Vuex来进行全局管理，然后对相应的变化做出全局改变。技术栈
Vue全家桶（使用Vue-cli作为构建工具）
Webpack
Mint-Ui
Es6
Sass
Velocity, AlloyTouch等第三方库
运行演示
线上地址：
源码地址：
移动端请扫描下面二维码：
运行截图：
项目组件
[x] 首页 -- 完成
[ ] 电台 -- 无法获取电台API
[X] 歌手信息 -- 完成
[X] 歌手列表 -- 完成
[x] 歌曲排行 -- 完成
[x] 歌曲列表 -- 完成
[x] 热门推荐 -- 完成
[x] 歌曲搜索 -- 完成
[x] 歌曲播放 -- 完成
[x] 底部固定歌曲播放条 -- 完成
项目结构
|-- build // webpack配置文件|-- config // 项目打包路径|-- src // 源码目录 | |-- api // QQ音乐Api分析文件| |-- index.js | |-- assets // 图片资源文件| |-- components // 组件| |-- fallback.vue // 公用后退组件| |-- header.vue // 重写Mini-Ui头部组件，来实现更多效果| |-- index.vue // 首页界面| |-- list.vue // 公用歌曲列表组件| |-- lyrics.vue // 歌词组件| |-- play-fixed.vue // 底部固定歌曲播放组件| |-- playing.vue // 歌曲播放页面| |-- radio.vue // 电台界面| |-- ranklist.vue // 歌曲排行榜界面| |-- recommend.vue // 推荐歌曲界面| |-- search.vue // 搜索界面| |-- singer.vue // 歌手界面| |-- singerlist.vue // 歌手列表界面| |-- slider.vue // 歌词滑动组件| |-- special.vue // 特殊界面用于使用Iframe包含封面等QQ音乐原生界面| |-- toplist.vue // QQ音乐巅峰榜界面| |-- mixin // 全局mixin方法| |-- index.js | |-- router // Vue 路由| |-- index.js| |-- sass // css文件夹，采用Sass进行预编译| |-- packages // Mint-Ui文件夹，覆盖Mint-Ui原有样式| |-- cell.scss| |-- header.scss| |-- index.scss| |-- navbar.scss| |-- search.scss| |-- themes // APP主题CSS，未来将增加主题切换功能| |-- index.scss| |-- transition // 全局公用Transition, Animation| |-- index.scss| |-- dimension.scss // 阿里SUI, Rem屏幕适应变化css(暂未使用)| |-- index.scss // Sass 入口文件| |-- mixins.scss // Sass 公用全局Mixin| |-- normalize.scss // Normalize.css| |-- page.scss // 页面布局css| |-- scaffold.scss // scaffold css 设置基本全局样式| |-- util.scss // 公用全局Sass组件| |-- var.scss // 全局Sass变量，这里使用sass-resources-loader向全局注入Sass变量| |-- store // Vuex Store文件，APP核心所在| |-- index.js | |-- util // 全局公用函数| |-- index.js | |-- App.vue // App入口文件| |-- filter.js // 注册全局Vue filter| |-- main.js // 程序入口文件，加载Vuex,Vue-router等插件| |-- mintUi.js // Mint-Ui配置文件| |-- test // 测试目录，暂未使用|-- .babelrc // ES6语法编译配置|-- .editorconfig // 代码编写规格|-- .eslintignore // Eslint 忽略的文件|-- .eslintrc.js // EsLint 配置 暂未使用 |-- .gitignore // git ingnore|-- .postcssrc.js // post css 配置文件|-- README.md // README|-- index.html // 入口html文件`-- package.json // 项目及工具的依赖配置文件
Build Setup
# downloadgit clone https://github.com/Panda-Hope/vue-qqmusic# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpm test