onemusic
仿移动端音乐Web APP
# 安装相关依赖包
npm install
# 开发运行
npm run dev
# 打包
npm run build
# build for production and view the bundle analyzer report
npm run build --report- Vue全家桶
- Vue.js 框架
- Vue.router 前端路由
- Vue.cli 脚手架
- Vuex
- axios
- 相关插件的使用
- babel-polyfill babel-runtime fastclick
- Vue-Awesome-Swiper 轮播组件
- better-scroll
- vue-lazyload 图片懒加载
- pinyin
- animate.css 动画库
- good-storage
- 初始化项目安装几个包 babel-polyfill babel-runtime fastclick reset.css border.css
- 使用了 iconfont图标库 改变了标题的字体样式 global.css
- 设置 推荐 歌手 排行 页面的路由 和 重定向功能
- 推荐页面的轮播图
- 安装使用了
Vue-Awesome-Swiper轮播插件2.6.7版本的 最新版本现在坑有点多 - 安装使用了
axios来请求数据 - 推荐歌单 推荐歌曲
- 样式和数据的添加
- 增加了 loading 单文件组件 当数据没有得到前 显示正在加载中 样式
- 增加了图片懒加载
- 页面基本功能实现
- 歌手详情页面 作为 歌手页面的子路由
- 因为自己的问题那个better-scroll用的不是很好 后面的交互体验就没有去弄了然后还遗留了一个小问题
- 太难了！！！！！！！
- 通过Vuex实现管理相关播放器配置数据
- 给播放器界面设置简单的动画过渡
- 歌曲播放和控制歌曲播放（暂停 播放）和 歌曲图片旋转动画功能实现
- 实现歌曲 上一首 下一首播放 和 获取歌曲时间 功能
- 实现进度条跟随音乐的功能 点击 拖拽 进度条功能
- 播放器的播放模式切换功能
- 简单的优化了请求歌曲的URL不存在为null时歌曲是不能播放的 这时候提示用户歌曲不能播放的弹出框
查找不到歌曲的音源的信息 - 歌词显示部分的功能不写了。
- 播放器这个版块有点难也有点烦。。。有很多小问题在里面，但是耐心和实力还有时间摆在那里，所以就决定这样了吧
- 推荐页面的推荐歌单 和 推荐新音乐 数据处理 通过 Vuex 管理数据 和 播放器结合应用
- 写法和套路 和歌单页面相似 （布局 、 数据 、 渲染） 完成！！！
- 搜索框 当 输入搜索的内容时 第一次去请求数据并且渲染在页面当中
- 下拉刷新时 再次请求数据
- 该项目搜索 只搜索歌曲 当点击歌曲后 进入 播放器组件 播放该歌曲
- 搜索历史数据存放在 Vuex 和 本地存储中 这里会使用到一个插件
good-storage
- 添加 切换歌曲 功能
- 删除 播放列表歌曲 功能
- 清空 播放列表歌曲 功能
- 不打算去做了
- 数据调用的是 NeteaseCloudMusicApi(网易云音乐 NodeJS 版 API)
- https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi
- 感谢数据接口的提供！！！
- 刚刚学完 Vue这个框架 体验到了数据驱动视图 MVVM**， 但是那时候没有感受到它的强大之处
- 然后在知乎看到 Vue 实现网易云音乐 WebApp 这篇文章
- 就决定去按照它的样式模板自己去写一个了
- 然后就是发现有这个 数据的提供 就觉得很舒服 完全不用顾及
- 虽然造轮子的人多了 但是 在学习方面不管造什么轮子都是好轮子 有收获就行
