vue-qqmusic

by Panda-Hope

Panda-Hope / vue-qqmusic

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

467 Stars 176 Forks Last release: Not found 91 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.