Vue-mmPlayer 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Vue-mmPlayer 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Vue-mmPlayer 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript HTML/CSS
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 白开水不加糖
适用人群 未知
收录时间 2021-10-15

软件简介

Vue-mmPlayer 是一个基于 Vue 的在线音乐播放器。模仿 QQ 音乐网页版界面,采用 flexbox  position 布局; mmPlayer 虽然是响应式,但主要以 PC 端为主,移动端只做相应适配; 只做主流浏览器兼容。

api:一个开源的网易云音乐 NodeJS 版 API

在线演示地址

React 移动端版本(高仿网易云音乐)

技术栈

项目结构目录图(使用 tree 生成)

├── public                                          // 静态资源目录
│   └─index.html                                    // 入口 html 文件
├── screenshots                                     // 项目截图
├── src                                             // 项目源码目录
│   ├── api                                         // 数据交互目录
│   │   └── index.js                                // 获取数据
│   ├── assets                                      // 资源目录
│   │   └── background                              // 启动背景图目录
│   │   └── img                                     // 静态图片目录
│   ├── base                                        // 公共基础组件目录
│   │   ├── mm-dialog
│   │   │   └── mm-dialog.vue                       // 对话框组件
│   │   ├── mm-icon
│   │   │   └── mm-icon.vue                         // icon 组件
│   │   ├── mm-loading
│   │   │   └── mm-loading.vue                      // 加载动画组件
│   │   ├── mm-no-result
│   │   │   └── mm-no-result.vue                    // 暂无数据提示组件
│   │   ├── mm-progress
│   │   │   └── mm-progress.vue                     // 进度条拖动组件
│   │   └── mm-toast
│   │        ├── index.js                           // mm-toast 组件插件化配置
│   │        └── mm-toast.vue                       // 弹出层提示组件
│   ├── components                                  // 公共项目组件目录
│   │   ├── lyric
│   │   │   └── lyric                               // 歌词和封面组件
│   │   └── mm-header
│   │   │   └── mm-header.vue                       // 头部组件
│   │   ├── music-btn
│   │   │   └── music-btn.vue                       // 按钮组件
│   │   ├── music-list
│   │   │    └── music-list.vue                     // 列表组件
│   │   └── volume
│   │        └── volume.vue                         // 音量控制组件
│   ├── pages                                       // 页面组件目录
│   │   ├── comment
│   │   │   └── comment.vue                         // 评论
│   │   ├── details
│   │   │   └── details.vue                         // 排行榜详情
│   │   ├── historyList
│   │   │   └── historyList.vue                     // 我听过的(播放历史)
│   │   ├── playList
│   │   │   └── playList.vue                        // 正在播放
│   │   ├── search
│   │   │   └── search.vue                          // 搜索
│   │   ├── topList
│   │   │   └── topList.vue                         // 排行榜页面
│   │   ├── userList
│   │   │   └── userList.vue                        // 我的歌单
│   │   ├── mmPlayer.js                             // 播放器事相关件绑定
│   │   └── music.vue                               // 播放器主页面
│   ├── router
│   │   └── index.js                                // 路由配置
│   ├── store                                       // vuex 的状态管理
│   │   ├── actions.js                              // 配置 actions
│   │   ├── getters.js                              // 配置 getters
│   │   ├── index.js                                // 引用 vuex,创建 store
│   │   ├── mutation-types.js                       // 定义常量 mutations 名
│   │   ├── mutations.js                            // 配置 mutations
│   │   └── state.js                                // 配置 state
│   ├── styles                                      // 样式文件目录
│   │   ├── index.less                              // mmPlayer 相关基础样式
│   │   ├── mixin.less                              // 样式混合
│   │   ├── reset.less                              // 样式重置
│   │   └── var.less                                // 样式变量(字体大小、字体颜色、背景颜色)
│   ├── js                                          // 数据交互目录
│   │   ├── hack.js                                 // 修改 nextTick
│   │   ├── mixin.js                                // 组件混合
│   │   ├── song.js                                 // 数据处理
│   │   ├── storage.js                              // localStorage 配置
│   │   └── util.js                                 // 公用 js 方法
│   ├── App.vue                                     // 根组件
│   ├── config.js                                   // 基本配置
│   └── main.js                                     // 入口主文件
└── vue.config.js                                   // vue-cli 配置文件

功能

  • 播放器
  • 快捷键操作
  • 歌词滚动
  • 正在播放
  • 排行榜
  • 歌单详情
  • 搜索
  • 播放历史
  • 查看评论
  • 同步网易云歌单

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
打分: 力荐
很好
10/18 10:43
回复
举报
更多评论
暂无内容
发表了博客
2020/04/14 13:50

Vue - Vue-CLI2 和 Vue-CLI3、Vue-CLI4的区别

周末在家新建了一个 Vue 测试项目,但不管怎么建,总会提示一些 有的没的,杂七杂八的信息,如:找不到 funding、存在多少漏洞(vulnerabilities) 什么的。如下所示: 寻思着,出现这些问题的原因,应该是一些 不太重要的依赖包 更新了版本 或 迁移了地址,导致之前的 Vue-CLI 找不到 对应的版本 或 依赖包地址了。 虽然暂时没发现这些错误对项目的运行和打包有啥影响,但是一句话,看着不爽。既然看着不爽,就想收拾它,怎么收拾...

0
3
2020/11/19 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装和一些简单介绍,这次就主要学习Vue实例。 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。 var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在...

0
1
发表了博客
2018/04/27 14:00

Vue--vue-Router

一.vue路由的基本使用 为什么需要路由? 因为我们通过component切换组件无法给组件传递参数 component切换组件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 </head...

0
1
发表了博客
2020/08/22 00:00

VUE|Vue实例

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 欢迎加入团队圈子!与作者面对面!直接点击! 1.创建一个Vue实例 之前初步学习了Vue的安装和一些简单介绍,这次就主要学习Vue实例。 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。 var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在...

0
0
发表于数据库专区
2020/01/02 10:21

VUE-认识Vue

1.认识Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度...

0
1
发表于数据库专区
2020/01/02 10:45

VUE-Vue实例

4.Vue实例 4.1.创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括: el data methods 等等 接下来我们一 一介绍。 4.2.模板或元素 每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。 我们可以通过el属性来指定。 例如一段html模板: <div id="app"> </div> 然后创...

0
0
发表了博客
2019/06/23 21:29

[Vue] : Vue概述

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架。 Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 Vue 核心的概念,就是让用户不再操作DOM元素,提高渲染效率,前端程序员只需要关心数据的业务逻辑,不再关系 DOM 是如何渲染的。 MVC 与 前端中的 MVVM...

0
1
发表于数据库专区
2020/01/02 11:53

VUE-vue-cli

9.vue-cli 9.1.介绍和安装 在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。 幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli 使用它能快速的构建一个web工程模板。 官网:https://github.com/vuejs/vue-cli 安装命令:npm install -g vue-cli 9.2.快速上手 我们新建一个module: 切换到该目录: 用vue-cli命令,快速搭建一个webpack的项目:v...

0
0
发表了博客
2019/04/04 11:41

vue -- vue实例

一、vue实例 let app = new Vue({ // 对象属性 ]) 二、对象属性 1、el 就是父DOM 2、data 所有vue上面操作的数据都会被写在这里 3、methods 所有的函数方法都写在这里 methods: { getFun () { console.log(123) } } 4、components 用来注册子组件用 5、props 这个是子元素用来接收父元素传递数据的属性 二、生命周期钩子函数 生命周期钩子函数 作用范围 beforeCreate el,data都为undefined,还没有初始化...

0
2
发表了博客
2018/08/18 17:12

[vue]vue路由篇vue-router

spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query http://localhost:63342/login?name=maotai&age=22 params: $route.params http://localhost:63342/login/maotai/22 引入router组件后, vm里注册router,会在vm实例上新增router属性 基础路由 匹配规则tag激活类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
29 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部