Vue全家桶+Mint-Ui打造高仿QQMusic，搭配详细说明

Vue-QQMusic

简介：

http://www.tuicool.com/articles/jQfEJzq

最近有点小闲置，于是乎希望写点东西，正好自己喜欢听歌，便决定自己写一个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