高仿网易云音乐(Vue实例)—Vue实战

时间 2019-11-16

标签高仿网易音乐 vue 实例实战繁體版

原文原文链接

前言

随着不断的学习Vue，须要作一个小项目经过在实现项目过程当中了解到更多的知识。随着现在人们对于音乐的需求，移动端的使用量愈发增长，项目经过Vue编写实现，全面借用网易云音乐移动端的UI设计、功能实现，努力作到以假乱真的效果。前几天便着手开始弄了,到今天为止也算是勉强能用了。css

本项目自行构思得出，由我的独立编写程序研究。

注：此项目纯属我的瞎搞，正常使用请选择网易云音乐官方客户端。前端

项目目标

全面实现移动端网易云音乐的功能vue

项目还在编写完善中

上一次更新(2019-10-21)： 优化git

最近一次更新(2019-10-22)： 喜欢歌曲github

技术栈

主要依赖

Vue 全家桶(使用 Vue-cli 做为构建工具)
WebPack4.0
ES6
Less
ESLint
ElementUI
网易云音乐API

效果演示

查看效果点击查看效果【使用Chrome浏览器效果更佳】
腾讯云服务器最近出现了问题，可能没法在线查看，劳烦小主自行克隆
查看源码点击查看源码面试

目标功能

[x] 手机登陆、注册
[x] 修改密码
[x] 个人页面歌单信息
[x] 添加，删除歌单
[x] 最近播放
[x] 心动模式
[x] 个人电台
[x] 个人收藏
[x] 发现页面推荐歌单
[x] 发现页面新碟
[x] 发现页面新歌
[x] 发现页面每日推荐
[x] 发现页面歌单
[x] 歌单广场
[x] 新歌推荐
[x] 更多新碟
[x] 发现页面排行榜
[ ] 发现页面电台
[x] 退出登陆
[x] 发现页面私人FM
[x] 搜索功能
[x] 搜索结果展现
[x] 热搜榜
[x] 历史记录
[x] 搜索推荐
[x] 歌手分类
[x] 播放功能(小播放器进度条)
[x] 播放列表
[x] 添加删除播放列表
[ ] 歌曲mv播放
[x] 签到
[x] 歌曲喜欢与否
[x] 专辑收藏与否
[ ] 相关评论
[ ] 用户相关
[ ] 用户设置
[ ] 页面滚动加载
[ ] 左右滑动切换
[ ] 页面切换动画
[ ] 登录状况判断
[ ] 全面优化&修复

部分截图

侧边帐户中心

发现页面&每日推荐

歌单&歌单详情

排行榜&排行榜信息

个人页面&最近播放

个人歌单&播放歌曲

搜索展现
vuex

启动步骤

查看源码点击查看源码npm

npm install
npm run dev (本地开发)
npm run build (生产环境打包)

项目布局

.src
+-- api
|   +-- config.js // 存取相关的api地址
|   +-- index.js // 请求相关的api方法
+-- assets
|   +-- styles
    |   +-- border.css // 移动端的1px边框
    |   +-- global.less // 全局应用样式
    |   +-- reset.css // 重置样式
    |   +-- resetEleUI.less // 修改elementUI组件样式
|   +-- utils // 全局要使用的方法
    |   +-- getPhone // 获取手机号码
    |   +-- modalScroll // 处理移动端滚动条
|   +-- Bus.js // Bus 总线
|   +-- Mixins.js // 混入(mixin)
+-- base // 存取页面公共的小组件
    +-- albumPage // 歌单展现页面组件
    +-- songListPage // 展现歌曲列表
    +-- alert // 提示消息
    +-- audioAllTitle // 播放所有标题行
    +-- button // 登录页面按钮
    +-- djSublistCard // 相似于个人电台页面的长卡片组件
    +-- generalNav // 通用页面顶部的标题行
    +-- icon // 图标展现
    +-- idxCard // 官方排行榜
    +-- imgCard // 歌单的图片卡
    +-- interchangeable // 用来展现搜索展现页面除单曲之外的项目
    +-- loading // 转圈loading
    +-- pageErrorInfo // 出错提醒
    +-- pageErrorLoading // 页面加载loading
    +-- searchInput // 搜索框
    +-- slider // 播放列表滑块
    +-- sliderNav // 滑动标题
    +-- song // 歌曲项
    +-- titleFooter // 搜索展现页综合页面各项通用头和尾
+-- getInfos // 获取一些静态信息
    +-- getData // 获取静态信息方法
    +-- icon // 存取图标信息
+-- pages // 项目路由页面
+-- router // 路由配置
    +-- index
+-- store // vuex 配置使用
    +-- action // 根级别的 action
    +-- getter // 根级别的 getter
    +-- index // 组装模块并导出 store 的地方
    +-- mutation-types // 根级别的 mutation-types
    +-- mutation // 根级别的 mutation
    +-- state // 根级别的 state

查看源码欢迎star，欢迎issueapi

后期我会在博客更新项目开发过程当中遇到的坑，学习到的新知识，新方法等。欢迎关注浏览器

本项目会长期更新，欢迎你们指出问题，共同窗习

但愿对读完本文的你有帮助、有启发，若是有不足之处，欢迎批评指正交流！

欢迎关注个人我的博客分享一些前端技术、面试题、面试技巧等

辛苦整理良久，还望手动点赞鼓励~