Code Monkey home page Code Monkey logo

sl1673495 / vue-netease-music Goto Github PK

View Code? Open in Web Editor NEW
2.2K 20.0 473.0 2.24 MB

🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player

Home Page: https://ssh-music.vercel.app/

License: GNU Affero General Public License v3.0

JavaScript 18.77% HTML 1.03% Vue 75.09% Shell 0.36% SCSS 4.75%
vuejs javascript netease-cloud-music vuex vue-cli3 vue-music vue-music-player player music-player web-music-player

vue-netease-music's Introduction

🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器(PC) Online Music Player

音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾。

偶然间发现 PC 端 Web 版的网易云音乐做的实在是太简陋了,社区仿 PC 客户端的网易云也不多见。

为了弥补这个遗憾,就用 Vue 全家桶模仿 mac 客户端的 UI 实现了一个,欢迎提出意见和 star🌟~

💐预览地址

💐源码地址

进度

  • mv 页(3.0 新增)
  • cd 页 (2.0 新增)
  • 搜索建议
  • 搜索详情
  • 播放(版权歌曲无法播放)
  • 发现页
  • 播放列表
  • 播放记录
  • 全部歌单
  • 歌单详情
  • 最新音乐
  • 主题换肤功能
  • 登录(网易云 uid 登录)

后端接口

https://binaryify.github.io/NeteaseCloudMusicApi

技术栈

  • Vue 全家桶 通过 Vue-CLI3 初始化生成。
  • ElementUI 魔改样式。
  • better-scroll 歌词滚动部分用了黄轶老大的 (贼爽)
  • CSS Variables 主题换肤。
  • ESNext (JavaScript 语言的下一代标准)
  • Sass(CSS 预处理器)
  • postcss-pxtorem(自动处理 rem,妈妈再也不用担心屏幕太大太小了)
  • workbox-webpack-plugin 谷歌开发的利用 Service Worker 实现页面预缓存的插件。

Screenshots

首页

歌单列表

歌单详情

音乐播放

安装与使用

npm i
npm run dev

友情链接

mmPlayer

vue-netease-music's People

Contributors

dependabot[bot] avatar sl1673495 avatar yanzixian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-netease-music's Issues

学习学习

我去,跟大佬一比,我就是个弱鸡啊,好多源码都没看明白。好多方法哪里调用的都没看明白.....

安装时产生以下错误日志 无法安装成功

安装时产生以下错误日志
0 verbose cli [ 0 verbose cli '/usr/local/node/bin/node', 0 verbose cli '/usr/local/node/bin/npm', 0 verbose cli 'run', 0 verbose cli 'devnpm', 0 verbose cli 'run', 0 verbose cli 'dev' 0 verbose cli ] 1 info using [email protected] 2 info using [email protected] 3 timing config:load:defaults Completed in 2ms 4 timing config:load:file:/usr/local/node/lib/node_modules/npm/npmrc Completed in 1ms 5 timing config:load:builtin Completed in 1ms 6 timing config:load:cli Completed in 2ms 7 timing config:load:env Completed in 0ms 8 timing config:load:file:/www/wwwroot/NeteaseCloudMusic/vue-netease-music/.npmrc Completed in 0ms 9 timing config:load:project Completed in 1ms 10 timing config:load:file:/root/.npmrc Completed in 0ms 11 timing config:load:user Completed in 0ms 12 timing config:load:file:/usr/local/node/etc/npmrc Completed in 0ms 13 timing config:load:global Completed in 0ms 14 timing config:load:cafile Completed in 1ms 15 timing config:load:validate Completed in 0ms 16 timing config:load:setUserAgent Completed in 0ms 17 timing config:load:setEnvs Completed in 1ms 18 timing config:load Completed in 8ms 19 verbose npm-session af6ef889a20ea736 20 timing npm:load Completed in 17ms 21 timing command:run-script Completed in 2ms 22 verbose stack Error: missing script: devnpm 22 verbose stack at runScript (/usr/local/node/lib/node_modules/npm/lib/run-script.js:54:11) 23 verbose cwd /www/wwwroot/NeteaseCloudMusic/vue-netease-music 24 verbose Linux 3.10.0-957.27.2.el7.x86_64 25 verbose argv "/usr/local/node/bin/node" "/usr/local/node/bin/npm" "run" "devnpm" "run" "dev" 26 verbose node v15.8.0 27 verbose npm v7.5.1 "~/.npm/_logs/2021-02-07T09_29_56_961Z-debug.log" 38L, 1687C

关于css

想问一下css样式是自己手写的吗

请求mp3url时经常失败

chrome浏览器,经常第一次请求返回size很小,第二次正常返回正常播放
失败的请求,返回size只有1-4k

Request URL: http://m10.music.126.net/20191213094232/8da3340006d63281540c88444aa57e3e/ymusic/5353/0253/0209/d9cf3eeaaa59d41e9aa85c350ce35a65.mp3
Request Method: GET
Status Code: 206 Partial Content
Remote Address: 114.80.30.35:80
Referrer Policy: no-referrer-when-downgrade

Iocn

他这个Iocn 中的iconfont是咋封装进去的没找到iconfont.css相关文件呢

cnpm i

[NeteaseCloudMusicApi@git+https://github.com/Binaryify/NeteaseCloudMusicApi.git] install NeteaseCloudMusicApi from git git+https://github.com/Binaryify/NeteaseC loudMusicApi.git, may be very slow, please keep patience platform unsupported @vue/[email protected][email protected] › watchpack@1 .6.0 › [email protected] › fsevents@^1.2.7 Package require os(darwin) not compatibl e with your platform(win32) [fsevents@^1.2.7] optional install error: Package require os(darwin) not compati ble with your platform(win32)

从哪开始写

我是一个编程新手,想仿写一个这个项目,vue项目搭建起来后,从哪里开始写

banner & loading background

客户端 banner 图片是圆角的,看起来更舒服

歌单切换时,loading 最好加个 background,类似左上角四个菜单的切换效果就好
现在切换歌单时,歌单图片和歌曲图片是分别替换的,有很明显的时间差,很别扭

为什么我npm i不了??

aging/better-scroll-c7c78135/.eslintignore'
npm WARN tar ENOENT: no such file or directory, open '/Users/zhangxi/vue-netease-music/node_modules/.staging/better-scroll-c7c78135/.travis.yml'
npm WARN tar ENOENT: no such file or directory, open '/Users/zhangxi/vue-netease-music/node_modules/.staging/better-scroll-c7c78135/LICENSE'
npm WARN tar ENOENT: no such file or directory, open '/Users/zhangxi/vue-netease-music/node_modules/.staging/better-scroll-c7c78135/README_zh-CN.md'
npm ERR! Unexpected end of JSON input while parsing near '...":"sha512-AHCPCJdPe/h'
npm WARN tar ENOENT: no such file or directory, open '/Users/zhangxi/vue-netease-music/node_modules/.staging/element-ui-95891b15/CHANGELOG.fr-FR.md'

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zhangxi/.npm/_logs/2019-08-05T07_49_11_257Z-debug.log

歌单信息 内容获取不到了

本人前端新手 最近在模仿大佬这个网易云网页版 /playlist/detail 这个接口 获取不到信息了 需要验证 有解决办法吗

项目无法打包

执行[npm i]命令后报错,三台服务器都无法成功运行这条命令
阿里云(CentOS7)
image
tx云(CentOS7)
image
另一台(CentOS8)
image

想问下删除的请求没有吗?

vue新手,下载下来学习的,在src/api/comment.js想新建一个request.delete()请求发现后端api接受不到(自己本地的api测试)

//删除评论
export const delComment = ids=> request.delete(/v1/comment/del,{ ids })

用request.get()/request.post()都可以接收到参数 ,想问问删除的请求怎么写?

前端页面数据未显示,不会运行后端

你好,首先我npm install npm run serve之后,默认到http://localhost:8080
但是页面没有显示数据;接着你在readme里面写的 “后端项目 地址 clone下来之后执行node app.js,默认启动在3000端口,之后就可以访问到接口了”这个怎么运行,请帮忙详细说明,谢谢了
Snip20190812_1

一些细节优化

作为一个专业的魔改工程师
看到你的项目竟然没有打算魔改
不过,(Blitz就不说了还没上线QwQ)
1.
image
建议使用CSS禁用select
2.
image
建议把自个Github键扔了
3.
image
这个展开键和原版有差异
4.
image
总体感觉还是不错的

页面加载404

很多接口已经失效了,比如获取歌单详情页的已经访问不了了

运行报错

$ npm run serve

[email protected] serve E:\work\H5\project\vue-netease-music-master
vue-cli-service serve

INFO Starting development server...
98% after emitting CopyPlugin ERROR Failed to compile with 2 errors17:41:19

These relative modules were not found:

  • ./modules/music in ./src/store/index.js
  • ./modules/user in ./src/store/index.js

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.