码迷,mamicode.com
首页 > 移动开发 > 详细

CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP

时间:2017-12-02 13:06:54      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:第三方   idt   规范   图片   data   方法   分享图片   用户交互   web   

CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP

学习要趁早,点滴记录,学习就是进步!

随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了。对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料.

CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP

下载地址:http://pan.baidu.com/s/1jI05TPW

基于Vue 全家桶 (2.x)制作的移动端音乐 WebApp ,一个媲美原生的移动端音乐 App,项目完整、功能完备、UI美观、交互一流。

 
技术分享图片
 
技术分享图片

学会能直接用在工作中的组件

13个

基础组件

1.confirm:确认对话框组件

2.listview:通讯录列表组件

3.loading:加载态组件

4.no-result:无结果展示组件

5.progress-bar:进度条组件

6.progress-circle:圆形进度条组件

7.scroll:移动端滚动组件

8.search-box:搜索框组件

9.search-list:搜索列表组件

10.slider:轮播图组件

11.switches:开关切换组件

12.top-tip:顶部消息提示组件

13. song-list:歌曲列表组件

15个

业务组件

1.add-song:添加歌曲到列表组件

2.disc:歌单详情页组件

3.m-header:页面头部组件

4.music-list:歌曲列表页面组件

5.player:播放器内核组件

6.playlist:播放列表组件

7.rank:排行榜页面组件

9.search:搜索页面组件

8.recommend:推荐页面组件

10.singer:歌手页面组件

11.singer-detail:歌手详情页组件

12.suggest:搜索提示列表组件

13.tab:顶部导航栏组件

14.top-list:排行榜详情页组件

15.user-center:用户中心页组件

技术栈

【前端】

Vue:用于构建用户界面的 MVVM 框架。它的核心是响应的数据绑定和组系统件

vue-router:为单页面应用提供的路由系统,项目上线前使用了Lazy Loading Routes技术来实现异步加载优化性能

vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷

vue-lazyload:第三方图片懒加载库,优化页面加载速度

better-scroll:iscroll 的优化版,使移动端滑动体验更加流畅

Sass(Scss):css 预编译处理器

ES6:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用

【后端】

Node.js:利用 Express 起一个本地测试服务器

jsonp:服务端通讯。抓取 QQ音乐(移动端)数据

axios:服务端通讯。结合 Node.js 代理后端请求,抓取 QQ音乐(PC端)数据

【自动化构建及其他工具】

vue-cli:Vue 脚手架工具,快速初始化项目代码

eslint:代码风格检查工具,规范代码书写

vConsole:移动端调试工具,在移动端输出日志

收获

总结了一套 Vue 通用组件,可以在其它项目中复用的 10+ 个基础组件、15+ 个业务组件

总结了一套常用的 SCSS mixin 库

总结了一套常用的 JS 工具函数库

体会到组件化、模块化开发带来的便捷

体会到将对象封装成类(ES6 class) 的便捷性,以及利用工厂方式初始化类实例

学会利用js编写过渡效果及动画效果制作良好的用户交互体验

TODO

歌曲数据全部来自 QQ 音乐,接口改变了可能就要修改jsonp和axios代码

由于项目的应用级状态不多(10个左右),所以就没有将action、mutation、和getters分割到单独的文件。但这样架构并不便于维护

实现细节

主要页面:播放器内核页、推荐页、歌单详情页、歌手页、歌手详情页、排行页、搜索页、添加歌曲页、个人中心页等。

核心页面:播放器内核页

组件树

CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP

标签:第三方   idt   规范   图片   data   方法   分享图片   用户交互   web   

原文地址:http://www.cnblogs.com/sunnyppl/p/7953535.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!