用vue实现简易的音乐webApp

来源:互联网 发布:手机电影剪辑软件 编辑:程序博客网 时间:2024/06/05 20:44

1、前言
学了半个月的vue,做这个小项目也做了半个月;数据是实时抓取自QQ音乐的api接口,主要的功能实现是对网页版的qq音乐功能来做参考。
2、关于项目

  • 这个小项目用了webpack+vue全家桶+es6等技术栈来实现的,基本实现了音乐播放,数据的动态抓取,因为要开学了,所以歌词页面和搜索也还没完善,后面也会慢慢的更新解决
  • 具体效果
首页榜单排行榜



  • github地址:https://github.com/Ewall1106/webApp

3、下一步

  • 首先的话还是会要继续夯实js基础,然后会梳理下这半个来月做这个小项目过程中遇到的问题,将知识点再整理一下写成文章,巩固一下知识点的同时也希望能为大家提供点帮助。
  • 然后会把接下来的搜索、歌手等几个页面完成,完善整个webApp,然后也想引用下mint-ui这个vue组件,完善下页面,丰富下效果

4、总结

  • 通过这个项目学到的东西当然是不言自明的。对vue技术栈有了初步的认识,v-router怎么用、vuex单向数据流、v-resource、qq音乐api数据怎么抓等、然后对前端项目的构建利用webpack自动化构建工具从无到有整个流程有了了解。
  • 其实一开始我是学了有一个月的react,现在又撸了一个月vue,对于前端框架也是半年内开始学习(以前一直都在搞js基础),也在尝试不同的框架,找到自己最合适的那个,两者之间异同就不说了,框架入门还是选vue吧,反正对我个人来说,react比vue难。。。
  • 在这过程中遇到困难确实磨砺心志,Google都Google烂,有几天编到凌晨都头发晕,写到怀疑自己,但是做到现在,每完成一个页面还是挺有成就感的;编程这东西吧有时候还是得看点天赋,有些大神做这点东西几天就搞完了。
  • 学无止境,前端要学的东西感觉实在太多了,但是还是要立足根本,继续把js基础打好、学好英文;前端吧,坚持与热爱比什么都重要,最后引句话共勉吧:

人一能之,己百之;人十能之,己千之。果能此道矣,虽愚必明,虽柔必强。《礼记·中庸》

参考学习
https://cn.vuejs.org/v2/guide/installation.html
https://router.vuejs.org/zh-cn/
https://vuex.vuejs.org/zh-cn/
http://es6.ruanyifeng.com/#docs/intro
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://javascript.ruanyifeng.com/nodejs/npm.html
http://www.jianshu.com/p/7b79094cb957



作者:Ewall_
链接:http://www.jianshu.com/p/14f9d00968af
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原创粉丝点击