iOS程序员学习Vue实战

栏目: IT资讯 · 发布时间: 7年前

内容简介:最近老大说要重构项目----hybrid APP,而作为iOS开发的我虽然之前学过一点HTML基础,一直没有得到实战,所以主动提出调研并学习Vue.js。就这样,vue学习之路开始了。过了一遍官网之后就开始想实战了,从网上查了资料正好看到黄轶大神的vue-music,于是就开始仿写了。。。项目是基于Vue.js,成品是一个移动端的音乐播放器,来源于imooc的实战课程

前言

最近老大说要重构项目----hybrid APP,而作为iOS开发的我虽然之前学过一点HTML基础,一直没有得到实战,所以主动提出调研并学习Vue.js。就这样,vue学习之路开始了。过了一遍官网之后就开始想实战了,从网上查了资料正好看到黄轶大神的vue-music,于是就开始仿写了。。。 demo地址

概述

项目是基于Vue.js,成品是一个移动端的音乐播放器,来源于imooc的实战课程

iOS程序员学习Vue实战

iOS程序员学习Vue实战

iOS程序员学习Vue实战

iOS程序员学习Vue实战

效果图

数据来源

所有数据都来自于QQ音乐,抓取自QQ的接口,大部分接口都是JSONP,抓取比较容易,其中一些接口限制了host,不能直接抓取,采用的方法是用axios代理,设置header,以此绕过host的限制

技术栈

iOS程序员学习Vue实战

技术栈

从本项目能学到什么

可直接应用工作的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:排行榜页面组件
  8. recommend:推荐页面组件
  9. search:搜索页面组件
  10. singer:歌手页面组件
  11. singer-detail:歌手详情页组件
  12. suggest:搜索提示列表组件
  13. tab:顶部导航栏组件
  14. top-list:排行榜详情页组件
  15. user-center:用户中心页组件

写在最后

具体code可查看 GitHub ,通过vue-music项目学习了企业项目中项目目录结构设计,组件封装,移动端适配,路由拆分,性能调优,同时对vuex有了更深刻的理解,node写server也了解了一通,eslint代码风格检查 工具 让书写更规范,总之收获很多,再次感谢开源精神。革命尚未成功,仍需努力。


以上所述就是小编给大家介绍的《iOS程序员学习Vue实战》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++ Primer 中文版(第 5 版)

C++ Primer 中文版(第 5 版)

[美] Stanley B. Lippman、[美] Josée Lajoie、[美] Barbara E. Moo / 王刚、杨巨峰 / 电子工业出版社 / 2013-9-1 / CNY 128.00

这本久负盛名的 C++经典教程,时隔八年之久,终迎来史无前例的重大升级。除令全球无数程序员从中受益,甚至为之迷醉的——C++ 大师 Stanley B. Lippman 的丰富实践经验,C++标准委员会原负责人 Josée Lajoie 对C++标准的深入理解,以及C++ 先驱 Barbara E. Moo 在 C++教学方面的真知灼见外,更是基于全新的 C++11标准进行了全面而彻底的内容更新。......一起来看看 《C++ Primer 中文版(第 5 版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具