Vue2中使用Vant组件

前两天在做一个自定义页面的功能模块，中间涉及到预览组件的开发，我就在想中间预览组件能不能用开源的专门做H5端的组件UI库，这样就开发起来就方便很多，不用自己一个个地去写这些组件了，于是就找到了Vant组件 ，感觉用起来还挺方便的，记录一下使用方法。效果如下图：

自定义页面

一、安装Vant

#如果安装有问题，使用cnpm 试一试
npm i vant@latest-v2 -S

二、配置自动按需引入组件 (推荐)

1.根目录找到babel.config.js文件，在plugins数组中添加

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    //添加支持按需引入配置
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
}

三、新建一个专门用来全局注册Vant组件的文件

1.我这里就建在src/services/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里面导入vant.js

//注册全局的Vant组件
import './services/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>

六、注意事项

• 配置好了之后，如果出现组件没有样式，需要重启一下工程：npm run serve