二、页面骨架开发

本章节代码更新至：https://github.com/liugezhou/liugezhou_music/tree/chapter2

本节效果图：

骨架.png

本节主要修改了如下几个文件的代码：

1. /build/webpack.base.conf.js

aias中添加别名：'components':resolve('src/components')

2. /index.html

 <meta name="viewport"
          content="width=device-width, initial-scale=1.0, 
          maximum-scale=1.0, 
          minimum-scale=1.0, user-scalable=no">

3. /package.json

    "babel-runtime": "^6.0.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
    "vue-router": "^3.0.1",
    "fastclick": "^1.0.6"
  },

4. /src/App.vue

在主Vue文件中，添加了<m-header>组件、<tab>组件与<router-view>

5. /src/components/m-header/m-header.vue

这块代码主要就是页面效果显示toolbar栏最上层部分，这里使用了mixin中的bg-image方法

6. src/components/tab/tab.vue

这里是页面的主要显示效果，四个toolbar。
知识点一：router-link中添加tag="div",说明这是一个div。
知识点二：to="./xxx"，代表了路由的跳转。
知识点三：&.router-link-active .tab-link为toolbar点击添加了效果。

7. src/router/index.js

路由index文件，主要注册了四个组件，定义了四个组件的跳转。

其它略。