vue按需引入vant(手机轮播图为例)

配置需要2步,使用需要一步3个地方,^_;一共三步

1.1 通过 npm 安装

npm i vant -S

1.2通过 yarn 安装

yarn add vant

可以在package.json中搜索vant 确实是否安装成功(一般是没什么问题的)

第二步安装插件

npm i babel-plugin-import -D

这时候在你的根目录下(和nodemodules等同级的目录下,就会出现 .babelrc)
打开配置一下

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
// 改变的主要是下面的这个plugins
  "plugins": ["transform-vue-jsx", "transform-runtime",
    ["import",
      {
        "libraryName": "vant",
        // "libraryDirectory": "es", 如果是webpack 这个是不需要配置的
        "style": true
      }
    ]
  ]
}

第三步使用,这里用轮播图作为例子

   <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item,i) in banner" :key="'banner'+i">
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>

import { Swipe, SwipeItem } from "vant";

 components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  }