3.Index.vue

写Index.vue之前需要写ArticleList组件,因为这个有重用的地方,所以当成组件,比如最新文章和最热文章可以用一个组件重用
ArticleList.vue 依然用Iview的组件Card

<template>
  <Card>
    <p slot="title">{{title}}</p>
    <p v-for="item in list" :key="item.id">
        <router-link :to="'/article/'+item.id">
            {{item.title}}
        </router-link>
    
    </p>
  </Card>
</template>

<script>
export default {
    name:'ArticleList',
    data(){
        return{}
    },
    created() {
        
    },
    props:{

        list:Array,
        title:String
    }
    
}
</script> 

在index.vue中引入ArticleList.vue,使用的时候,穿两个参数就好了,title,和list.
还需要实现一个轮播图,轮播图也是iview的组件

<template>
    <div>
        <!--轮播图-->
        <Carousel v-model="value2" loop>
            <CarouselItem :key="item.title" v-for="item in pic">
                <div class="demo-carousel">
                    <router-link :to="item.src">
                        <img :src="item.img"/>
                        <div>
                            
                            {{item.title}}
                        </div>
                    </router-link>
                </div>
            </CarouselItem>
        </Carousel>
        <!--文章列表-->
        <div class="article-list">
            <row type="flex" justify="space-around" class="code-row-bg">
                <i-col span="11">
                    <article-list :list="list" :title="listTitle"></article-list>
                </i-col>
                <i-col span="11">
                    <article-list :list="hotList" :title="hotListTitle"></article-list>
                </i-col>
            </row>
        </div>
    </div>
</template>
<script>
    import ArticleList from '../components/ArticleList'

    export default {
        name: 'Home',
        components: {
            ArticleList
        },
        data() {
            return {
                value2: 0,
                pic: [],
                list: [],
                listTitle: '最新文章',
                hotList: [],
                hotListTitle: "最热文章"
            }
        },
        created: function () {
            //获取主页轮播图
            this.$api.get('getIndexPic').then((res) => {
                console.log('轮播图')
                console.log(res.data)
                this.pic = res.data
            })
            //获取所有文章
            this.$api.get('getNewArticle').then((res) => {
                let rData = res.data.slice(0, 5)
                let tData = []
                rData.map((item) => {
                    if (item.id !== 0) {
                        tData.push(item)
                    }
                })
                this.list = tData
            })
            //获得热点文章
            this.$api.get('getHotArticle').then((res) => {
                let rData = res.data.slice(0, 5)
                let tData = []
                rData.map((item) => {
                    if (item.id !== 0) {
                        tData.push(item)
                    }
                })
                this.hotList = tData
            })
        }
    }
</script>

第一是轮播图Carousel,第二个是引入的ArticleList 介绍一下Carousel,

    <Carousel
        v-model="value"
        :autoplay="setting.autoplay"
        :autoplay-speed="setting.autoplaySpeed"
        :dots="setting.dots"
        :radius-dot="setting.radiusDot"
        :trigger="setting.trigger"
        :arrow="setting.arrow">
        <CarouselItem>
            <div class="demo-carousel">1</div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">2</div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">3</div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">4</div>
        </CarouselItem>
    </Carousel>

v-model绑定的值是起始图片的索引,:arrow是切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示）.trigger触发,click,hover
第二个组件使用了view的组件row:有这么几个属性:type,justify 非 template/render 模式下，需使用 i-col。i-col的属性一般用span:span的值从0-24