引入

// main.js
// 导入包
import { Swipe, SwipeItem } from 'mint-ui'// 注册
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

放在需要显示的位置

// HomeContainer.vue(首页 -> 组件)
<template><div><!-- 轮播图区域 --><mt-swipe :auto="4000"><mt-swipe-item>1</mt-swipe-item><mt-swipe-item>2</mt-swipe-item><mt-swipe-item>3</mt-swipe-item></mt-swipe></div>
</template>

轮播图需要高度

// HomeContainer.vue
<template>
...
</template><style lang="scss" scoped>.mint-swipe {height: 200px;}
</style>

设置轮播图每一张图片的颜色

// css写法
<style lang='scss' scoped>.mt-swipe-item:nth-child(1){background-color:red;}.mt-swipe-item:nth-child(2){background-color:blue;}.mt-swipe-item:nth-child(3){background-color:lightblue;}
</style>// 使用less写法
<style lang="scss" scoped>.mt-swipe-item {&:nth-child(1){background-color:red;}&:nth-child(2){background-color:blue;}&:nth-child(3){background-color:lightblue;}}
</style>