内容简介:Vue全家桶+Mint-Ui打造高仿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] 首页 -- 完成
-
[ ] 电台 -- 无法获取电台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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- vue全家桶
- 升级vue全家桶过程记录
- SpringBootBucket 1.0.0 发布,SprintBoot全家桶
- 免费获取 JetBrains 全家桶正版 License 教程
- 使用React全家桶搭建一个后台管理系统
- Windows 10四月更新恢复预装“全家桶”遭吐槽
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通JavaScript+jQuery
曾顺 编著 / 人民邮电出版社 / 2008-9 / 59.00元
随着Ajax技术的不断风靡,其核心技术JavaScript越来越受到人们的关注,各种JavaScript的框架层出不穷。jQuery作为JavaScript框架的优秀代表,为广大开发者提供了诸多便利。 本书从介绍JavaScript的基础知识开始,围绕标准Web的各项技术予以展开,通过大量实例对JavaScript、CSS、DOM、Ajax等 Web关键技术进行深入浅出的分析,主要内容包括J......一起来看看 《精通JavaScript+jQuery》 这本书的介绍吧!