Vue 2.0 高级实战-开发移动端音乐WebApp

来源：互联网发布：cygwin 运行linux程序编辑：程序博客网时间：2024/05/21 22:55

前言

Vue.js 是最火的前端框架，几乎没有之一，资深程序员这样评价它：“Vue.js 兼具 Angular.js 和 React.js 的优点，并剔除它们的缺点”，很多前端工程师都视Vue.js为心中最理想的框架

项目主要技术栈

vue2.0 vuex node

已实现功能

[x] 图片懒加载
[x] 历史搜索
[x] 音乐收藏
[x] 音乐播放
[x] 音乐暂停
[x] 音乐快进
[x] 音乐快退
[x] 自动播放下一曲
[x] 音乐列表（增删）
[x] 下一曲
[x] 歌手
[x] 歌手详情
[x] 排行榜
[x] 排行榜详情页
[x] 搜索
[x] loading
[x] 播放详情页
[x] 滚动歌词
[x] 展示音乐进度
[x] 音乐进度的拖拽

项目树

.├── README.md├── build│   ├── build.js│   ├── check-versions.js│   ├── dev-client.js│   ├── dev-server.js│   ├── utils.js│   ├── vue-loader.conf.js│   ├── webpack.base.conf.js│   ├── webpack.dev.conf.js│   └── webpack.prod.conf.js├── config│   ├── dev.env.js│   ├── index.js│   └── prod.env.js├── index.html├── package.json├── prod.server.js├── src│   ├── App.vue│   ├── api│   │   ├── config.js│   │   ├── rank.js│   │   ├── recommend.js│   │   ├── search.js│   │   ├── singer.js│   │   └── song.js│   ├── base│   │   ├── confirm│   │   │   └── confirm.vue│   │   ├── listview│   │   │   └── listview.vue│   │   ├── loading│   │   │   ├── loading.gif│   │   │   └── loading.vue│   │   ├── no-result│   │   │   ├── no-result.vue│   │   │   ├── no-result@2x.png│   │   │   └── no-result@3x.png│   │   ├── progress-bar│   │   │   └── progress-bar.vue│   │   ├── progress-circle│   │   │   └── progress-circle.vue│   │   ├── scroll│   │   │   └── scroll.vue│   │   ├── search-box│   │   │   └── search-box.vue│   │   ├── search-list│   │   │   └── search-list.vue│   │   ├── slider│   │   │   └── slider.vue│   │   ├── song-list│   │   │   ├── first@2x.png│   │   │   ├── first@3x.png│   │   │   ├── second@2x.png│   │   │   ├── second@3x.png│   │   │   ├── song-list.vue│   │   │   ├── third@2x.png│   │   │   └── third@3x.png│   │   ├── switches│   │   │   └── switches.vue│   │   └── top-tip│   │       └── top-tip.vue│   ├── common│   │   ├── fonts│   │   │   ├── music-icon.eot│   │   │   ├── music-icon.svg│   │   │   ├── music-icon.ttf│   │   │   └── music-icon.woff│   │   ├── image│   │   │   └── default.png│   │   ├── js│   │   │   ├── cache.js│   │   │   ├── config.js│   │   │   ├── dom.js│   │   │   ├── jsonp.js│   │   │   ├── mixin.js│   │   │   ├── singer.js│   │   │   ├── song.js│   │   │   └── util.js│   │   └── stylus│   │       ├── base.styl│   │       ├── icon.styl│   │       ├── index.styl│   │       ├── mixin.styl│   │       ├── reset.styl│   │       └── variable.styl│   ├── components│   │   ├── add-song│   │   │   └── add-song.vue│   │   ├── disc│   │   │   └── disc.vue│   │   ├── m-header│   │   │   ├── logo@2x.png│   │   │   ├── logo@3x.png│   │   │   └── m-header.vue│   │   ├── music-list│   │   │   └── music-list.vue│   │   ├── player│   │   │   └── player.vue│   │   ├── playlist│   │   │   └── playlist.vue│   │   ├── rank│   │   │   └── rank.vue│   │   ├── recommend│   │   │   └── recommend.vue│   │   ├── search│   │   │   └── search.vue│   │   ├── singer│   │   │   └── singer.vue│   │   ├── singer-detail│   │   │   └── singer-detail.vue│   │   ├── suggest│   │   │   └── suggest.vue│   │   ├── tab│   │   │   └── tab.vue│   │   ├── top-list│   │   │   └── top-list.vue│   │   └── user-center│   │       └── user-center.vue│   ├── main.js│   ├── router│   │   └── index.js│   └── store│       ├── actions.js│       ├── getters.js│       ├── index.js│       ├── mutation-types.js│       ├── mutations.js│       └── state.js└── static    ├── 1.png    ├── 2.png    ├── 3.png    ├── 4.png    └── 5.png