使用vue全家桶制作的音乐播放器

前段时间逛论坛，无意间看到了一个大神用vue写的音乐播放器，于是就手热自己写了一个

关于我，欢迎关注 作者：潇禹

源代码地址：GitHub
欢迎大家star和follow

在线预览地址： Vue音乐播放器 (PC端请在浏览器的移动端模式下查看)

# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 使用依赖

animate.css vue-router vue-resource webpack vue-awesome-swiper... 目录结构

├── README.md ├── config // 项目不同环境的配置 ├── index.html // 项目入口文件 ├── dist // 项目build目录 ├── package.json // 项目配置文件 ├── src // 生产目录 │   ├── assets // css js 和图片资源 │   │ ├── css │   │ ├── iconfont │   │ ├── img │   │ └── js │   ├── components // 各种组件 │   │ ├── loading │   │ ├── carousel.vue │   │ ├── header.vue │   │ ├── home.vue │   │ ├── musicList.vue │   │ ├── navBar.vue │   │ ├── playInfo.vue │   │ ├── playBar.vue │   │ ├── raking.vue │   │ ├── search.vue │   │ └── toplist.vue │   ├── store // vuex状态管理器 │   │ ├── action.js │   │ ├── getters.js │   │ ├── index.js │   │ ├── mutations.js │   │ ├── state.js │   │ └── types.js │   ├── json           // 推荐页面数据 │   │ └── recommend.json │   ├── App.vue │   └── main.js // Webpack 预编译入口 已实现功能： 音乐播放 自动播放下一曲 音乐列表（增删） 下一曲 排行榜 排行榜详情页 搜索 loading 播放详情页 滚动歌词 展示音乐进度 音乐进度的拖拽 存在的Bug：   进度条拖拽后歌词位置不能及时定位   点开歌曲详情页歌词位置不执行定位 欢迎技术交流，xiaoyuliu.webdeveloper@gmail.com