Vue-QQMusic
简介：
近来有点小闲置，于是乎愿望写点东西，恰好本身喜好听歌，便决议本身写一个QQ音乐的简易版。
趁便进一步加深下本身对挪动端的学问。我会在每一个中心组件和部份都加下注解大抵申明道理，争夺供应一个优越的代码浏览环境，在谛视部份是采纳英文写的，请原谅我撇脚的英语o(╯□╰)o，迎接人人给我提出更好的看法( *︾▽︾)
道理简介：
起首这里经由过程Jsonp来举行跨域猎取QQ音乐API数据，在API Hanler对API举行处置惩罚导出一致的要领来猎取数据。
中心文件则是在Store,在这里运用Vuex一致治理页面切换动画，歌曲播放状况，歌曲进度等信息。一切关于歌曲的操纵都经由过程Vuex来举行全局治理，然后对响应的变化做出全局转变。
手艺栈
Vue百口桶（运用Vue-cli作为构建东西）
Webpack
Mint-Ui
Es6
Sass
Velocity, AlloyTouch等第三方库
运转演示
线上地点：Vue-QQMusic
源码地点：源码
挪动端请扫描下面二维码：
运转截图：
项目组件
[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
# download
git clone https://github.com/Panda-Hope/vue-qqmusic
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test