基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）

1、项目开发需求分析：

包含四个层面——

（1）推荐模块

（2）歌手模块

（3）排行模块

（4）搜索模块

2、项目开发流程

（1）搭建项目：借助vue-cli脚手架工具，具体请参考博客： ...；

由于项目存放在本地电脑E盘VueTest目录下，

cd E:\VueTest

图1：切换项目存放目录、vue-cli搭建初始项目

通过脚手架vue-cli工具搭建项目

vue init webpack vue-music

选择配置项目相关webpack

                    

（2）进入项目vue-music

cd vue-music

安装项目node_mudules依赖（在这里采用淘宝镜像cnpm，可加快安装效率）

cnpm install

上述流程具体操作见（图2：安装项目依赖）

    

                                         图2：安装项目依赖

在本地加载该项目工程文件

npm run dev

                     图3：搭建成功界面

当看到localhost:8080/8081时，说明项目工程环境搭建成功。

                                        图4：本地搭建环境成功

当显示上述界面，则表示vue-cli脚手架搭建的vue-music项目成功。

（3）在编辑器中打开该项目工程文件（在该环节中我采用的编辑器：VS Code）

项目目录中所以开发主要基于src目录作为主载

图5：项目工程目录

2.3-1——目录src

api：主要存放后台请求相关的代码，包括ajax，jsonp等，

有.gitkeep文件表示虽为空，但可上传至git上

common：主要存放通用的静态资源，包括字体图标fonts、图片images、脚本文件js库、样式文件stylus

   stylus——

base.styl：基础样式，引用variable.styl

variable.styl：以“变量定义”方式引入样式文件（颜色、字体定义规范）

icon.styl：字体图标样式文件

index.styl：引入reset、base、icon三者样式文件

mixin.styl：定义一些函数，方便组件.vue文件中引用

reset.styl：重置样式文件

图6：common目录下stylus 

components：主要存放项目中组件化.vue文件

router：主要存放静态路由相关代码index.js

store:主要存放vuex相关代码

App.vue：

main.js：主要存放渲染app文件的js脚本

2.3-2：更改相关文件

在build文件夹下，webpack.base.conf.js中

resolve: {

extensions: [ '.js', '.vue', '.json'],

alias: {

'src' : resolve( 'src'),

'common' : resolve( 'src/common')

}

},

这样，在项目中可以这么使用，如下：

import 'common/stylus/index.styl'

3、页面骨架开发

（1）页面入口+header

首先，package.json文件做以下更改

"dependencies": {

"babel-runtime": "^6.26.0",

"vue": "^2.5.2",

"vue-router": "^3.0.1",

"fastclick": "^1.0.6"

},

在“devDependencis”下，新增下面babel-polyfill、stylus、stylus-loader三个依赖，

运行cnpm install

"stylus ": "^0.54.5",

"babel-polyfill": "^6.2.0",

"stylus-loader": "^3.0.1"

（2）路由配置+顶导组件开发

router静态路由——根组件默认指向

vue-router（index.js）——new Vue({ router })（main.js）——<router-view/>（App.vue）

main.js——babel-polyfill、fastClick

在http://localhost:8080/#中可以用静态路由vue-router实现界面间切换

图7：vue-router实现界面跳转

解析：由于在项目工程文件中指定根路径path:/recommend，所以默认为该界面，同时点击不同的tab选项列   表，可由静态路由进入不同的组件。

import Router from