vue-music

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

文件说明

│  App.vue                             主页面
│  main.js                             启动文件
│  
├─api
│      config.js                       api通用参数配置
│      lyric.js                        获取歌词的api
│      rank.js                         获取排行榜的api
│      recommend.js                    获取推荐歌曲的api
│      search.js                       搜索的api
│      singer.js                       歌手的api
│      
├─base
│  ├─listview                          通用列表组件
│  │      listview.vue
│  │      
│  ├─loading                           通用loading组件
│  │      loading.gif
│  │      loading.vue
│  │      
│  ├─musiclist                         通用歌曲列表组件
│  │      musiclist.vue
│  │      
│  ├─scroll                            滚动组件
│  │      scroll.vue
│  │      
│  ├─slider                            幻灯片组件
│  │      slider.vue
│  │       
│  ├─songlist                          歌曲列表组件
│  │      [email protected]
│  │      [email protected]
│  │      [email protected]
│  │      [email protected]
│  │      songlist.vue
│  │      [email protected]
│  │      [email protected]
│  │      
│  └─suggest                           搜索结果组件
│          suggest.vue
│          
├─common
│  ├─fonts                             字体文件
│  │      .gitkeep 
│  │      music-icon.eot
│  │      music-icon.svg
│  │      music-icon.ttf
│  │      music-icon.woff
│  │      
│  ├─image                             图片文件
│  │      1default.png
│  │      default.png
│  │      
│  ├─js                                通用js
│  │      config.js                    定义一些常量
│  │      dom.js                       操作dom的js库（主要是动态设置样式时添加兼容性前缀)
│  │      fetch-jsonp.js               fetch-jsonp
│  │      mixin.js                     mixin
│  │      singer.js                    歌手相关操作
│  │      song.js                      歌曲相关操作
│  │      utility.js                   通用方法：打乱数组，简单实现节流（debounce）
│  │      
│  └─less                              样式文件
│          base.less              
│          icon.less
│          index.less
│          mixin.less
│          reset.less
│          variable.less
│          
├─components
│  ├─dissDetail						   推荐详情组件
│  │      dissDetail.vue
│  │      
│  ├─m-header                          头部组件
│  │      [email protected]
│  │      [email protected]
│  │      [email protected]
│  │      [email protected]
│  │      m-header.vue
│  │      
│  ├─player                            播放组件（最复杂的）
│  │      player.vue
│  │      
│  ├─progressBar                       播放进度条组件
│  │      progressBar.vue
│  │      
│  ├─rank                              排行榜组件
│  │      rank.vue
│  │      
│  ├─rankDetail                        排行榜详情
│  │      rankDetail.vue
│  │      
│  ├─recommend                         推荐列表组件
│  │      recommend.vue
│  │      
│  ├─search                            搜索页组件
│  │      search.vue
│  │      
│  ├─searchBox                         搜索框组件
│  │      searchBox.vue
│  │      
│  ├─singer                            歌手组件
│  │      singer.vue
│  │      
│  ├─singerDetail                      歌手详情组件
│  │      singerDetail.vue
│  │      
│  └─tab                               tab组件
│          tab.vue
│          
├─router                               路由设置
│      index.js
│      
└─store                                vuex设置
        action.js
        getters.js
        index.js
        mutation-types.js
        mutations.js
        state.js

分支说明

各个分支记录了各个大模块开发的过程

1. 路由+顶部导航
2. 推荐页面
3. 推荐歌曲详情
4. 歌手页面
5. 歌手详情
6. 歌曲播放
7. 排行榜
8. 搜索