1、下载3张图片放进assets\img目录，方便轮播图测试使用。
2、在views下新建Banner.vue代码如下：
<template>
<div id="banner">
<mt-swipe :auto="4000">
<mt-swipe-item v-for="(item,index) in pics" :key="index">
<img :src="item.url">
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<script>
export default {
name:'Banner',
data(){
return {
pics:[
{url:require('../assets/img/pic1.jpg')},
{url:require('../assets/img/pic2.jpg')},
{url:require('../assets/img/pic3.jpg')}
]
}
}
}
</script>
<style scoped>
.mint-swipe {
height: 180px;
}
.mint-swipe img {
width: 100%;
height: 180px;
}
</style>
3、修改Home.vue如下：
<template>
<div id="home">
<!-- 顶部导航栏 -->
<mt-header fixed title="首页">
<mt-button icon="search" slot="right" @click="search"></mt-button>
</mt-header>
<!-- 由于顶部导航栏固定，所以轮播图要上边距占据其高度 -->
<div style="height: 40px;"></div>
<!-- 轮播图 -->
<Banner></Banner>
</div>
</template>
<script>
// 导入轮播图组件
import Banner from './Banner.vue'
export default {
methods:{
// 点击搜索按钮，跳转到搜索组件
search(){
this.$router.push({name:"Search"});
}
},
// 注册组件
components:{
Banner
}
}
</script>
<style scoped>
</style>
