All Projects → ddqre12345 → Vue Music

ddqre12345 / Vue Music

Licence: mit
cloud-music(网易云音乐)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Music

Vue Axios Github
Vue 全家桶 + axios 前端实现登录拦截、登出、拦截器等功能
Stars: ✭ 2,622 (+424.4%)
Mutual labels:  axios, vuex, vuejs2, vue-router
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (-39.8%)
Mutual labels:  axios, vuex, vuejs2, vue-router
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (-50.2%)
Mutual labels:  axios, vuex, vuejs2, vue-router
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+45.8%)
Mutual labels:  axios, vuex, vuejs2, vue-router
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (-48.8%)
Mutual labels:  axios, vuex, vuejs2, vue-router
Netease yanxuan
vue版网易严选,体验网易严选购物流程,线上访问:http://zhaoboy.bid/yanxuan/#/
Stars: ✭ 417 (-16.6%)
Mutual labels:  axios, vuex, vue-router
Vuet
允许你定义飙车过程的集中式状态管理模式
Stars: ✭ 430 (-14%)
Mutual labels:  vuex, vuejs2, vue-router
Douban
Douban book website demo by server side render
Stars: ✭ 468 (-6.4%)
Mutual labels:  vuex, vuejs2, vue-router
Vue Boilerplate Template
🍎 Efficient development of web SPA using Vue.js(2.*) + Webpack + Element-ui + Pwa + Vuex + Vuex-router + Vue-i18n + Dayjs + Lodash.
Stars: ✭ 461 (-7.8%)
Mutual labels:  vuex, vuejs2, vue-router
Vue Testing Examples
Advanced testing with vuejs. When you need to go beyond Getting started section and see some real world example with everything that proper tests should have.
Stars: ✭ 288 (-42.4%)
Mutual labels:  axios, vuex, vue-router
Vue Kindergarten
Modular security for Vue, Vuex, Vue-Router and Nuxt
Stars: ✭ 303 (-39.4%)
Mutual labels:  vuex, vuejs2, vue-router
Dokit
基于 Spring Boot2、 Jpa、 Spring Security、JWT、redis、Vue的前后端分离的后台管理系统开发平台, 用户管理、菜单管理、角色管理、字典管理、权限控制的方式为RBAC,操作日志、异常日志、接口限流、项目支持数据权限管理,支持一键生成前后端代码(支持在线预览及打包下载),支持前端菜单动态路由 可一键部署服务器应用,数据库。系统中活跃用户状态监控,监视当前系统CPU、内存、磁盘、堆栈等相关信息,基于Element UI在线表单设计及生成Vue代码。
Stars: ✭ 348 (-30.4%)
Mutual labels:  axios, vuex, vue-router
Vue News
Vue2.5知乎日报单页应用
Stars: ✭ 300 (-40%)
Mutual labels:  axios, vuex, vue-router
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (-0.6%)
Mutual labels:  vuex, vuejs2, vue-router
Roastandbrew
Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book
Stars: ✭ 300 (-40%)
Mutual labels:  vuex, vuejs2, vue-router
Vue Store
基于Vue+Vue-Router+Vuex+Element-ui+axios,参考小米商城,实现的电商项目。
Stars: ✭ 308 (-38.4%)
Mutual labels:  axios, vuex, vue-router
Blog.admin
✨ 基于vue 的管理后台,配合Blog.Core与Blog.Vue等多个项目使用
Stars: ✭ 500 (+0%)
Mutual labels:  axios, vuex, vue-router
Vue Website
🍰 想用vue把我现在的个人网站重新写一下,新的风格,新的技术,什么都是新的!
Stars: ✭ 351 (-29.8%)
Mutual labels:  axios, vuex, vue-router
Vue Music Webapp
🎵💞🐔基于Vue 全家桶 (2.x)制作的移动端音乐 WebApp 。媲美原生、项目完整、功能完备、UI美观、交互一流。
Stars: ✭ 499 (-0.2%)
Mutual labels:  axios, vuex, vue-router
Vue Acl
Access Control List plugin for VueJS 2.0
Stars: ✭ 376 (-24.8%)
Mutual labels:  vuex, vuejs2, vue-router

网易云音乐

它会成为用vue实现网易云音乐最全的webapp,我们的目标是更像,更快,更优雅

友情提示:老用户更新可能需要重新npm install,开启webpack2新征程

vue网易云音乐webapp版

Star,Star,Star,这是对我最大的鼓励,重要的话说三遍,广告就要放在最显眼的地方,哈哈。

  • api来源(再次感谢Binaryify不断更新的网易云音乐接口,这也将是这个项目不断拓展下去的坚实依托,看着他的star蹭蹭蹭的往上涨,我必须厚着脸皮说有我一份功劳)
  • 源码地址
  • 项目预览(web端在chrome调试模式下效果更佳)
  • 针对segmenfault类app暂时无法有效预览的问题,建议粘贴 http://118.89.226.181:8080 到手机其他浏览器体验
  • 项目所提供请求地址希望仅供预览使用,本地开发建议参考api来源,配置本地服务器代理
  • 这是个连载的故事,预知前事如何,请跳转网易云音乐v1.0,现在我主要讲的是这个版本的更新内容

技术栈

  • Vue2:采用最新Vue2的语法
  • Vuex:管理公共组件状态量
  • vue-router:管理单页面应用路由
  • axios:发起http请求
  • stylus:css预处理语言
  • Express:vue-cli使用Express做服务器。
  • Webpack:自动化构建工具,主要配置vue-cli脚手架提供。
  • ES6:采用ES6语法。
  • CSS3:CSS3动画及样式。

功能介绍

v1.0 | 2017.05.09

  • 网易云(轮播,推荐歌单,独家放送,推荐MV,网友精选歌单(最新,最热),排行榜)
  • 搜索(热门搜索,搜索结果包括单曲,歌手,专辑,歌单,用户及其滑动切换)
  • 播放页面(歌词,碟片切换)
  • 歌手,专辑,歌单,用户等详情展示
  • 音乐播放功能(切歌,播放列表,播放进度显示)

v2.0 | 2017.07.01

  • 新增功能
    • mv播放详情页,包括mv播放,mv介绍,相似mv,mv评论,相似mv播放切换
    • 歌手详情页:歌手mv
    • 专辑详情页:专辑评论,专辑介绍详情
    • 歌单详情页:歌单评论,歌单介绍详情
    • 个性推荐增加最新音乐,主播电台
    • 排行榜增加全球榜
    • 排行榜榜单详情页,包括歌曲排名,歌单评论
    • 上滑歌单组件歌单循环,单曲,随机播放切换,歌曲播放效果增加
  • 功能优化
    • 转场效果优化
    • 播放展示效果优化
  • 组件优化
  • UI框架统一为vux(历史遗留问题)

v2.1 | 2017.07.08

  • webpack1.x->webpack2.6
  • 模块,组件基础优化

新增功能效果图

mv播放机mv评论 歌单排行榜全球版及评论 点击播放全部,歌曲循环,随机,单曲切换,专辑歌单详情,评论等

图片就到这里,more

v3.0 | 规划ing

我们在更像的路上又前进了几步,主打更快,更优雅的时候到了。

  • 新增功能
    • 新增“我的”及相关功能版块
    • 添加主题更换功能
    • 继续根据接口,完善各个版块功能
  • 最重要的工作
    • 重构可能是下一阶段最重要的工作了,如果感兴趣的话可以关注v3.0版本规划

安装运行(安装运行前请确定已安装node环境)

  • 环境安装:npm install
  • 启动服务:npm run dev
  • 发布代码:npm run build
  • 代码检查:npm run lint

项目构成

├── build                    // 构建服务和webpack配置
├── config            		 // 项目不同环境的配置
├── dist               		 // 项目build目录
├── index.html          	 // 项目入口文件
├── package.json      		 // 项目配置文件
├── static       			 // 放置静态资源
├── src                		 // 生产目录
│   ├── api       			// api请求
│   ├── assets              // 图片资源
│   ├── common          	// 公共的css js images资源
│   ├── components     		// 各种组件
│   ├── views          		// 各个视图
│   ├── vuex           	    // vuex状态管理器
│   ├── App.vue         	// 主页面
│   ├── router.js     		// 路由配置器
│   └── main.js       	    // Webpack 预编译入口

最后!!!!!

1.感谢github,感谢同样在分享的你,让我能站在巨人的肩膀上

2.感谢Binaryify对接口文档的不断维护与更新。

3.在下个版本前我可能会和大家分享下自定义mv视频播放部分遇到的一些坑及一些webpack打包优化

到这里,欢迎大家提issue,输出pr,点star,如果喜欢更可以watch,下阶段项目进展请关注v3.0小黑板,如果你有什么建议或者看到了项目中的那些不足之处你一定要在小黑板板上留言。本项目仅供学习交流使用,切勿用于商业用途,如有侵犯第三方版权问题及时联系我

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].