前兩天在做一個自定義頁面的功能模塊属愤，中間涉及到預(yù)覽組件的開發(fā)，我就在想中間預(yù)覽組件能不能用開源的專門做H5端的組件UI庫焚鹊，這樣就開發(fā)起來就方便很多逊脯，不用自己一個個地去寫這些組件了，于是就找到了Vant組件 舌劳，感覺用起來還挺方便的帚湘，記錄一下使用方法。
一甚淡、安裝Vant
#如果安裝有問題大诸，使用cnpm 試一試
npm i vant@latest-v2 -S
二、配置自動按需引入組件 (推薦)
1.根目錄找到babel.config.js文件贯卦，在plugins數(shù)組中添加
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
//添加支持按需引入配置
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
}
三资柔、新建一個專門用來全局注冊Vant組件的文件
1.我這里就建在src/util/vant.js里面
/**
* vant 的一些組件的使用
* 用到什么組件就注冊一下
*/
/**
* vant 的一些組件的使用
*/
import Vue from 'vue'
import { Lazyload, Swipe, SwipeItem, NoticeBar, Image as VanImage } from 'vant'
Vue.use(Lazyload)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(NoticeBar)
Vue.use(VanImage)
...
四、在main.js里面導(dǎo)入vant.js
//注冊全局的Vant組件
import './util/vant'
五撵割、使用（以輪播圖組件為例）
<template>
<div class="comp-wrap">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" class="swiper-img" />
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
data() {
return {
images: [
'https://img01.yzcdn.cn/vant/apple-1.jpg',
'https://img01.yzcdn.cn/vant/apple-2.jpg'
]
}
}
}
</script>
<style lang="scss" scoped>
.comp-wrap {
min-height: 200px;
background-color: #fff;
.swiper-img {
width: 100%;
height: 200px;
}
}
</style>
