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
  }