«

在vue2项目中如何使用vant组件库

---

时间：2023-5-11    作者：网络剑客    分类： other

---

1、在vue2项目中通过npm的下载安装vant2组件

npm i vant@latest-v2 -S

2、自动按需引入组件

npm i babel-plugin-import -D

自动引入组件,则需要安装babel-plugin-import插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

3、安装成功后,在babel.config.js文件中添加以下代码进行配置

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

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

我这里就建在src/utilS/vant.js里面

/**
 * 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)

5、在main.js里面导入vant.js

//注册全局的Vant组件
import './util/vant'

6、使用（以轮播图组件为例）

<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://img.qq.com/vant/apple-1.jpg',
        'https://img.qq.com/vant/apple-2.jpg'
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.comp-wrap {
  min-height: 200px;
  background-color: #fff;
  .swiper-img {
    width: 100%;
    height: 200px;
  }
}
</style>