【WEB】vue2.0开发音乐播放器

1.安装模版

vue init webpack vue-music

注：vue脚手架可以帮我们初始化webpack的配置
初始化后目录如下：

//所有开发是基于修改src的文件
api:用来放跟后端请求相关
common：通用的静态资源（fonts／image／js/stylus）
components:通用组件
router:路由相关组件
store：vuex相关代码
App.vue:模版
main.js:文件入口，用来渲染app的文件

stylus文件里的变量定义：

// 颜色定义规范
$color-background = #222
$color-background-d = rgba(0, 0, 0, 0.3)
$color-highlight-background = #333
$color-dialog-background = #666
$color-theme = #ffcd32
$color-theme-d = rgba(255, 205, 49, 0.5)
$color-sub-theme = #d93f30
$color-text = #fff
$color-text-d = rgba(255, 255, 255, 0.3)
$color-text-l = rgba(255, 255, 255, 0.5)
$color-text-ll = rgba(255, 255, 255, 0.8)

//字体定义规范
$font-size-small-s = 10px
$font-size-small = 12px
$font-size-medium = 14px
$font-size-medium-x = 16px
$font-size-large = 18px
$font-size-large-x = 22px

在其他的styl文件中，通过@import “./XX.styl”

在main.js中：import 'common/stylus/index.styl'

注：有几处需要修改：
1.在package.json里，添加stylus和stylus-loader依赖（npm install）
2.在webpack.base.conf.js里，配置路径别名

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api')
    }
  },

启动项目：npm run dev

2.开发tab界面并配置路由

1.components:
新建m-header文件：

<template>
  <div class="m-header">
    <div class="icon"></div>
    <h1 class="text">Chicken Music</h1>
    <router-link tag="div" class="mine" to="/user">
      <i class="icon-mine"></i>
    </router-link>
  </div>
</template>

<script type="text/ecmascript-6">
  ex