Vue百口桶+MintUi打造高仿QQMusic，搭配细致申明

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] 首页 &＃8212; 完成

• [ ] 电台 &＃8212; 没法猎取电台API

• [X] 歌手信息 &＃8212; 完成

• [X] 歌手列表 &＃8212; 完成

• [x] 歌曲排行 &＃8212; 完成

• [x] 歌曲列表 &＃8212; 完成

• [x] 热点引荐 &＃8212; 完成

• [x] 歌曲搜刮 &＃8212; 完成

• [x] 歌曲播放 &＃8212; 完成

• [x] 底部牢固歌曲播放条 &＃8212; 完成

项目构造


|-- 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