Vue2.0 数据抓取及Swiper组件开发

// config/index.js

module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        target: 'https://c.y.qq.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  },
}

// api/recommend.js
import axios from 'axios';

// 轮播图及热门歌单
export function getHomeData() {
    return axios.get('/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
        .then((res) => {
            return Promise.resolve(res.data)
        })
}

// recommend.vue

<script type="text/ecmascript-6">
  import { getHomeData } from 'api/recommend'
  import { ERR_OK } from 'api/config'

  export default {
    created() {
      this._getHomeData()
    },
    methods: {
      _getHomeData() {
        getHomeData().then((res) => {
          if (res.code === ERR_OK) {
            console.log(res.data.slider)
            console.log(res.data.songList)
          }
        })
      }
    }
  }
</script>

// 安装
npm i mint-ui --S

// main.js

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

// recommend.vue

<div v-if="slider.length" class="slider-wrapper">
    <mt-swipe :auto="4000">
    <mt-swipe-item v-for="(item, index) in slider" :key="index">
        <a :href="item.linkUrl">
        <img :src="item.picUrl" class="slider-img">
        </a>
    </mt-swipe-item>
    </mt-swipe>
</div>
<div class="recommend-list">
    <h1 class="list-title">热门歌单推荐</h1>
    <ul>
    <li v-for="(item, index) in discList" :key="index" class="item">
        <div class="icon">
        <img width="60" height="60" :src="item.picUrl">
        </div>
        <div class="text">
        <h2 class="desc" v-html="item.songListDesc"></h2>
        <p class="name" v-html="item.songListAuthor"></p>
        </div>
    </li>
    </ul>
</div>