vue music-抓取歌单列表数据（渲染轮播图）

下载安装新依赖

babel-runtime：对es6语法进行转译

fastclick：对移动端进行点击300毫秒延迟 ,,取消掉

babel-polyfill：API

先添加，在npm install

main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'

import 'common/stylus/index.styl'


Vue.config.productionTip = false

// 取消点击300毫秒的延迟
fastclick.attach(document.body) 

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

头部栏引用header组件

1：

<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">
  export default {}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .m-header
    position: relative
    height: 44px
    text-align: center
    color: $color-theme
    font-size: 0
    .icon
      display: inline-block
      vertical-align: top
      margin-top: 6px
      width: 30px
      height: 32px
      margin-right: 9px
      bg-image('logo')
      background-size: 30px 32px
    .text
      display: inline-block
      vertical-align: top
      line-height: 44px
      font-size: $font-size-large
    .mine
      position: absolute
      top: 0
      right: 0
      .icon-mine
        display: block
        padding: 12px
        font-size: 20px
        color: $color-theme
</style>

m-header。vue

2：在app.vue

<template>
    <div id="app">
3：显式
        <m-header></m-header>
    </div>
</template>

<script>
1:导入
    import MHeader from './components/m-header/m-header'
    export default {
      components:{
2：注册
          MHeader
      }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>

二：导入歌手页面，搜索页面，排行榜，推荐页面

1：先在index.js入口注册这4个组件

import Reacommed from 'components/reacommed/reacommed'
import Search from 'components/search/search'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'

2：配置url

export default new Router({
  routes: [
    {
      path: '/reacommed',
      component:Reacommed
    },
    {
        path:'/singer',
        component:Singer
    },
    {
        path:'/rank',
        component:Rank
    },
    {
        path:'/search',
        component:Search
    }
  ]
})

import Vue from 'vue'
import Router from 'vue-router'
import Reacommed from 'components/reacommed/reacommed'
import Search from 'components/search/search'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
 
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/reacommed',
      component:Reacommed
    },
    {
        path:'/singer',
        component:Singer
    },
    {
        path:'/rank',
        component:Rank
    },
    {
        path:'/search',
        component:Search
    }
  ]
})

index。js

3：如何引入router实例

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
// 1这里的router是index。js的实例
import router from './router'
import fastclick from 'fastclick'

import 'common/stylus/index.styl'


Vue.config.productionTip = false

// 取消点击300毫秒的延迟
fastclick.attach(document.body) 

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 2
  router,
  components: { App },
  template: '<App/>'
})

main.js