学习要趁早,点滴记录,学习就是进步!
随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了。对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料.
下载地址: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编写过渡效果及动画效果制作良好的用户交互体验
歌曲数据全部来自 QQ 音乐,接口改变了可能就要修改jsonp和axios代码
由于项目的应用级状态不多(10个左右),所以就没有将action、mutation、和getters分割到单独的文件。但这样架构并不便于维护
主要页面:播放器内核页、推荐页、歌单详情页、歌手页、歌手详情页、排行页、搜索页、添加歌曲页、个人中心页等。
核心页面:播放器内核页
组件树