Vue 像素级还原Mac端网易云音乐
运行
$ git clone [email protected]:Nele7/music.git
$ npm install || yarn install
$ npm run dev || yarn dev
技术栈
Vue.js：用于构建用户界面的 MVVM 框架Vue-cli3：Vue 脚手架工具，快速初始化项目代码Vue-Router：页面路由切换Vuex：实现不同组件间的状态共享Vue-lazyload：实现图片懒加载，节省用户流量，提升页面加载速度Element-ui：快速构建页面UI框架Axios：一个基于 Promise 的 HTTP 库，向后端发起请求Scss：css预处理器ES6、ES7：采用ES6、ES7语法，箭头函数、Promise、async...await等等很nicelocalStorage：保存用户信息、搜索历史记录、最近播放歌单、播放历史....NeteaseCloudMusicApi：网易云音乐 NodeJS 版 API，提供音乐数据iconfont：阿里巴巴图标库
功能
已完成
- 手机号、邮箱登录
- 发现音乐推荐、歌单、排行榜、歌手、最新音乐
- 歌手、歌单、专辑、用户详情
- 搜索，搜索结果，搜索历史
- 音乐播放、播放模式、播放列表、播放历史
- 歌词同步、键盘快捷键操作、音量调节
- MV播放、视频播放
- 歌曲、歌单、专辑、歌手、评论
- 用户关注、粉丝列表
- 主题换肤(浅色，深色，红色)
未完成
- 每日歌曲推荐
- 主播电台
快捷键
| Description | Keys |
|---|---|
| 播发/暂停 | Space |
| 音量加 | Up |
| 音量减 | Down |
| 上一曲 | Ctrl+left |
| 下一曲 | Ctrl+right |
| 喜欢歌曲 | Ctrl+L |
预览
项目演示地址：戳我
项目源码地址：戳我
如果觉得我的项目还不错的话，就给个 star 鼓励一下吧~
部分截图
项目结构
├─.electron-vue
├─.idea
├─build // 构建相关
├─dist //
├─node_modules // 依赖相关
├─src // 源代码
│ ├─main // 主进程
│ └─renderer
│ ├─api // api接口
│ ├─assets // 图标字体等静态资源
│ ├─components // 全局公用组件。不直接显示
│ │ ├─AlbumList // 专辑列表组件
│ │ ├─CommentInput // 回复评论输入框组件
│ │ ├─CommentList // 回复评论列表组件
│ │ ├─expectation // 敬请期待组件
│ │ ├─FollowList // 关注粉丝列表组件
│ │ ├─MusicList // 歌曲组件
│ │ ├─PlayerProgress // 进度条组件
│ │ ├─PlayList // 歌单列表组件
│ │ ├─RecommendList // 推荐组件
│ │ ├─SingerList // 歌手列表组件
│ │ └─VideoList // 视频列表组件
│ ├─config // 配置相关
│ ├─layout // 总体布局
│ ├─router // 路由
│ ├─store // 全局store管理
│ ├─utils // 全局公用方法
│ └─views // view视图层
│ ├─albumDetail // 专辑详情页面
│ ├─audioVisual // 视频页面页面
│ ├─avDetail // 视频详情页面
│ ├─discoverMusic // 推荐歌曲页面
│ │ ├─newMusic // 推荐歌曲最新音乐页面
│ │ ├─radio // 推荐歌曲电台页面
│ │ ├─rank // 推荐歌曲排行页面
│ │ ├─recommend // 推荐歌曲首页页面
│ │ ├─singer // 推荐歌曲歌手页面
│ │ └─songList // 推荐歌曲歌单页面
│ ├─fm // 私人FM页面
│ ├─loginDialog // 登录页面
│ ├─menus // 左侧菜单栏页面
│ ├─mv // mv页面
│ ├─mvDetail // mv详情页面
│ ├─pal // 朋友页面
│ ├─player // 播放页面
│ ├─search // 搜索页面
│ ├─searchDetail // 搜索详情页面
│ ├─singerDetail // 歌手详情页面
│ ├─songListDetail // 歌单详情页面
│ ├─userDetail // 用户详情页面
│ ├─userFollow // 用户关注页面
│ └─userInfo // 用户信息页面
├─static
└─test
This project was generated with electron-vue using vue-cli. Documentation about the original structure can be found here. 使用 el-tooltip 提示框无效的问题 SimulatedGREG/electron-vue#361