用vue实现简易的音乐webApp

简介: 1、前言学了半个月的vue,做这个小项目也做了半个月;数据是实时抓取自QQ音乐的api接口,主要的功能实现是对网页版的qq音乐功能来做参考。2、关于项目这个小项目用了webpack+vue全家桶+es6等技术栈来实现的,基本实现了音乐播放,数据...

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

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

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

目录
相关文章
|
7月前
|
小程序 Java 数据安全/隐私保护
基于微信小程序的音乐平台 毕业设计 JAVA+Vue+SpringBoot+MySQL
基于微信小程序的音乐平台 毕业设计 JAVA+Vue+SpringBoot+MySQL
|
7月前
|
搜索推荐
音乐偏好度推荐系统 毕业设计 JAVA+Vue+SpringBoot+MySQL(二)
音乐偏好度推荐系统 毕业设计 JAVA+Vue+SpringBoot+MySQL
|
7月前
|
搜索推荐 算法 Java
音乐偏好度推荐系统 毕业设计 JAVA+Vue+SpringBoot+MySQL(一)
音乐偏好度推荐系统 毕业设计 JAVA+Vue+SpringBoot+MySQL
|
11月前
|
JavaScript
Vue3.0项目——打造企业级音乐App(二)图片懒加载、v-loading指令的开发和优化
Vue3.0项目——打造企业级音乐App(二)图片懒加载、v-loading指令的开发和优化
128 0
|
11月前
|
JavaScript 前端开发
Vue框架和Axios实战:音乐播放器项目-音乐列表
Vue框架和Axios实战:音乐播放器项目-音乐列表
electron+vue音乐集成软件
上下曲播放有很多方法,可已根据当前播放的URL和列表数组里去遍历和这一个URL相等的那个数组的索引,当点击下一曲时,把那个索引加一,然后获取到这个数组的当前加一的索引,上一曲也是一样,不过这样有个问题,就是点击下一曲时,如有15个歌曲的数组 我判断当前的索引加一小于15
electron+vue音乐集成软件
|
存储 移动开发 JavaScript
使用vue互联QQ音乐完成网站音乐播放器
记录使用APlayer播放器+MetingJs实现 在线播放qq音乐、网易云音...等平台的音乐
385 1
使用vue互联QQ音乐完成网站音乐播放器
|
JavaScript 数据格式
基于Vue实现多标签选择器
基于Vue实现多标签选择器
207 0
基于Vue实现多标签选择器
|
JavaScript
Vue基于$attrs及$listeners实现隔代通信
Vue基于$attrs及$listeners实现隔代通信
96 0
Vue基于$attrs及$listeners实现隔代通信
|
JavaScript 数据格式
基于Vue实现多标签选择器
基于Vue实现多标签选择器
143 0
基于Vue实现多标签选择器