本文将带你了解WEBAPP开发心得之Vue 2.0 高级实战-开发移动端音乐WebApp，希望本文对大家学WEBAPP有所帮助

前言
   
    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
       
  
   
   
   
   
   
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！