vue京东实战------4章

三板斧：

写路由：    

{
    path: '/index',
    name: 'index',
    component: () => import('./views/Index.vue')
  }

新建Index.vue   

写轮播图，看cube ui：

写数据，在vue.config.js里面写链接：

//首页轮播图数据接口
            app.get('/api/banner',(req,res)=>{
              res.json({
                  data:[  {
                      url: 'https://m.xdclass.net',
                      image: 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/bannner/1901/learn.png'
                    },
                    {
                      url: 'https://m.xdclass.net',
                      image: 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/upload/banner/devpay.png'
                    },
                    {
                      url: 'https://m.xdclass.net',
                      image: 'https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/bannner/1901/bat.png'
                    }]
              })
          })

<template>
    <div id="index">
        <!-- 轮播图 -->
        <cube-slide ref="slide" :data="items" @change="changePage">
            <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
                <a :href="item.url">
                <img class="banner" :src="item.image">
                </a>
            </cube-slide-item>
        </cube-slide>
    </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],//轮播图数组
    }
  },
  methods: {
    changePage(current) {
    //   console.log('当前轮播图序号为:' + current)
    },
    clickHandler(item, index) {
      console.log(item, index)
    }
  },
 async created(){
     try{
         //获取轮播图数据
         const items=await this.$http.get('/api/banner')
         this.items=items.data
     }catch(err){
         console.log(err)
     }
  }
}
</script>

<style lang="stylus" scoped>
    #index
        a
            .banner
                display block
                width 100%
                height  175px
        .listul
            display flex
            flex-wrap   wrap
        .listli
            width 20%
            justify-content center
            img
                width 35px
                height  35px
                border-radius  50%
                padding 5px 0
            p
                font-size  14px
                padding-bottom  10px
</style>

-----------4-1--------------