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

haoguo 发布于2019-08-20 16:51 / 1617人阅读

摘要：简介最近有点小闲置，于是乎希望写点东西，正好自己喜欢听歌，便决定自己写一个音乐的简易版。核心文件则是在在这里使用统一管理页面切换动画，歌曲播放状态，歌曲进度等信息。所有对于歌曲的操作都通过来进行全局管理，然后对相应的变化做出全局改变。

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

云服务器 GPU云服务器详细说明安装php详细说明 icp备案流程详细说明 cn.com域名详细说明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83204.html

一个高仿追书神器的vue阅读器。已成功做成app

摘要：原创，基本上是界面，新加了七八个功能，解决了前辈阅读器上的绝大部分，并成功添加路径打包成。毕竟只是一个学习项目跨域问题本次开发使用的是代理追书神器，是不需要后台认证直接可以跨域的接口，以实现在移动端显示的效果。应届毕业生，目前正在找工作，简历需要所以开发了这个app。刚开始开发也是一脸懵逼，因为没得后台，一些逻辑功能也不知道怎么拓展。好在看到了追书神器api接口，顿时让我决心做出这一...

miracledan 2019-08-22 18:18 评论0 收藏0
Vue全家桶高仿网易云音乐mac客户端版（不像赔十个！！）

摘要：库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目音乐播放器虽然烂大街了，但是作为前端没自己撸一个一直是个遗憾，而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了，社区仿pc客户端的网易云也不多见，为了弥补这个遗憾，就用vue全家桶模仿mac客户端的ui实现了一个，欢迎提出意见和star~ 预览地址源码地址...

mgckid 2019-08-26 10:23 评论0 收藏0
Vue2.0—仿知乎日报总结

摘要：一个基于全家桶开发的仿知乎日报单页应用项目地址源码地址项目在线地址在线地址模式下推荐使用移动端模式浏览去观看如果觉得做得还不错或者项目源码对您有帮助希望您小抬右手到右上角点一个您的支持是作者长期更新维护的动力项目起源从二月份开始学习学习了 Vue-News 一个基于vue全家桶开发的仿知乎日报单页应用项目github地址:源码地址项目在线地址:在线地址 (PC模式下推荐使用chro...

lentoo 2019-08-20 16:18 评论0 收藏0
vue2.5全家桶高仿vivo商城百分之95

摘要：全家桶还有就是组件库开头在线预览旧的版本移动端商城新的版本移动端商城项目演示地址移动端商城建议调试手机模式下预览因为刚买的域名主机所以要解析，实名认证才可以浏览，所以你们还是下把项目给下载下来本地运行看把 vue全家桶 vue2.0+vuex+axios+better-scroll还有就是miut-ui组件库开头在线预览旧的版本：vivo移动端商城新的版本：vivo移动端商城项目...

inapt 2019-08-22 17:33 评论0 收藏0
基于Vue2全家桶的移动端AppDEMO实现

好久没更新过Vue的小文章，上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能，然后通过cordova打包生成apk，移动端表现还不错，今天把这个小东西分享出来，希望有更多的小伙伴能够用Vue去做一些有意思的东西，本人才疏学浅，有说的不对的地方，还请大家多多指教。下面按照惯例放上demo地址和源码地址,希望大家能给我点下star：Demo(进去需要先注册才能登录,用的lo...

Jiavan 2019-08-20 13:58 评论0 收藏0