All Projects → lookwe → vue-music

lookwe / vue-music

Licence: other
using Vue to Develop Mobile Project to Simulate “Baidu Music”(高仿百度音乐)

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to vue-music

vue-element-admin-ts
vue-element-admin 的 typescript 版本
Stars: ✭ 101 (+274.07%)
Mutual labels:  element, axios, vue-router
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+2392.59%)
Mutual labels:  element, axios, vue-router
Vue Todos
vue最新实战项目教程,从零开始,一步一个脚印,循序渐进。跟着我一起学习vue吧!
Stars: ✭ 1,659 (+6044.44%)
Mutual labels:  element, axios, vue-router
vue-mall
vue企业级商城练手项目并且提供接口唷
Stars: ✭ 14 (-48.15%)
Mutual labels:  axios, vue-router
wwvue-cli
vue-cli升级版脚手架,应有尽有的开箱即用方法及配置,没有花里胡哨的晦涩难懂的操作,上手成本极低,现已新增simple(极简模式)、vue3和iview-template,是个很不错的垫脚石,来不及解释了赶紧上车😊😘
Stars: ✭ 15 (-44.44%)
Mutual labels:  axios, vue-router
madao admin manage
🎉 VUE前后端分离管理系统,基于RBAC的后台管理。
Stars: ✭ 38 (+40.74%)
Mutual labels:  element, axios
Nx Admin
👍 A magical 🐮 ⚔ vue admin,记得star
Stars: ✭ 2,497 (+9148.15%)
Mutual labels:  element, axios
Vue-CAMP
VueJS
Stars: ✭ 16 (-40.74%)
Mutual labels:  axios, vue-router
Vue2.x-mobileSystem
基于Vue2.0的移动端项目,项目没有使用vue-cli,全部手写,让小白更容易学习理解
Stars: ✭ 72 (+166.67%)
Mutual labels:  axios, vue-router
shopping-cart
A vue.js project for shopping cart.
Stars: ✭ 57 (+111.11%)
Mutual labels:  axios, vue-router
Vue-NetEaseCloudMusic
vue,vuex ,vue-router,music
Stars: ✭ 95 (+251.85%)
Mutual labels:  axios, vue-router
vue2.0-SellPosSystem
vue2.0实战项目——简单的快餐店系统
Stars: ✭ 35 (+29.63%)
Mutual labels:  axios, vue-router
kugou
multiple implementations for kugou music
Stars: ✭ 25 (-7.41%)
Mutual labels:  axios, vue-router
nippo
本アプリケーションはYAPC::Hokkaido 2016の「Vue.jsによるWebアプリケーション開発」用に実装したサンプルアプリケーションです。
Stars: ✭ 17 (-37.04%)
Mutual labels:  axios, vue-router
Vue Element Admin
🎉 A magical vue admin https://panjiachen.github.io/vue-element-admin
Stars: ✭ 73,044 (+270433.33%)
Mutual labels:  element, axios
vue-webpack-boilerplate
A webpack boilerplate with vue-loader, axios, vue-router and vuex
Stars: ✭ 51 (+88.89%)
Mutual labels:  axios, vue-router
vue-admin-better
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Stars: ✭ 12,962 (+47907.41%)
Mutual labels:  element, axios
fd-vue-webapp
A Vue.js web application for Freedomotic Open IoT framework
Stars: ✭ 63 (+133.33%)
Mutual labels:  axios, vue-router
cloud-music-mobile
This is a music player
Stars: ✭ 22 (-18.52%)
Mutual labels:  axios, vue-router
Fantastic Admin
一款开箱即用的 Vue 中后台管理系统框架,基于ElementUI,兼容PC、移动端,vue-admin, vue-element-admin, vue后台
Stars: ✭ 153 (+466.67%)
Mutual labels:  element, vue-router

飞飞音乐网(WebApp)

为了打代码能快地飞起还能听歌。所以利用了工作之余的时间由我个人独立开发。使用H5音频元素开发出了此webApp名为飞飞音乐


效果演示

  手机扫一扫

图片

  或者点击 观看网站 (请用chrome手机模式预览)


技术栈

  • Vue2.5     用于构建用户界面的 MVVM 框架、数据驱动视图
  • axios      用来请求网络请求后端 API 音乐数据
  • vue-router     为单页面应用提供的路由系统 使用了 Lazy Loading Routes 技术来实现异步加载优化性能
  • vue-aplayer    音乐播放组件,实现全局共享音乐
  • element-ui     UI框架布局,使用简单图标,弹框
  • nprogress     轻量级Web进度条提升用户友好性
  • vue-lazyload    节省用户流量,优化页面加载速度,减低性能开销
  • 野狗通信云    提供第三方实时通信引擎服务,记录用户数据
  • 自定义组件     实现组件化开发,全局享用

项目功能

  1.用户登录 --完成

  2.用户注册 --完成

  3.智能搜索 --完成

  4.歌曲播放 --完成

  5.下载收藏 --完成

  6.歌词同步 --完成

  7.下拉刷新 --完成

  8.歌曲分类 --完成

  9.歌曲推荐 --完成

  10.歌手筛选 --完成

  11.歌曲排名 --完成

部分页面展示(查看所有页面请观看网站)

首页、播放页面

图片图片

搜索页面、我的页面

图片图片

最后总结


1、因为不是百度音乐官方(千千音乐),在一些接口数据上并不是很齐全,比如获取歌单,KTV,歌曲MV,歌手演出,不过后期我会收集数据并搭建后端服务完成,目前数据库已经开始设计。

2、项目中有些的功能复杂有的简单。特别个个组件直接传到数据,父子组件/兄弟组件/祖孙组件,并且类型居多,众多的数据和逻辑一度让人很头疼,在设计初期花了点时间。不过在慢慢建设中,渐渐熟悉了困难一点点解决。也很高兴在遇到难点时候一直没有放弃。

3、在项目数据共享这块采用Vue官网提供的依赖注入(provide/inject)取代Vuex,这点和很多使用Vue做音乐项目的作者有所不同,虽然Vuex帮助我们处理共享状态管理,但它还带来了更多概念和样板的成本。(不过在后期的版本迭代中会新出目前还没有实现的功能木块,到时候会使用上Vuex,大型单页面应用中因为vuex的存在,表现依然出色,在处理复杂交互逻辑的时候,vuex的存在是不可或缺的。所以说利用 vue + vuex 完全可以去做大型的单页面项目)

4、网站开始写,从登陆、注册、首页、歌单、专辑、歌手、分类、榜单、智能搜索、收藏下载、个人中心等等...到购买服务器部署上线。所有流程走完后,不但对vue的理解更深一层,而且对以后掌控大型项目的时候也有非常多的帮助,做一个实际的项目才能对自己有很大的提升。

5、开发期间,出现了很多问题,曾一度怀疑,花几个月的时间做这样一个项目到底有没有意义。期初打算是上手Vue练习下,结果不知不觉越做越大,到后来也更喜欢上它了,所有坚持下来后我相信一切都是值得的。

6、通过学习开发一个 Vue 多功能项目,让自己更熟练的使用 Vue框架、模块化开发、ES6/7 等等知识,提高自己的技术能力。

最终目标


1、使用uni-app 开发跨 Android 和 IOS 的原生APP版本

2、使用Java搭建后端API服务,并制作后台数据管理

3、下一次github仓库会发布别的项目,技术选型采用React框架,请敬请期待吧...

install dependencies

npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].