1.安裝vant

npm i vant -S：這是簡寫形式。

npm install vant --save:這是完整寫法。

npm install vant--save--registry=https://registry.npm.taobao.org

淘寶映象，速度快，安裝後檢視package.json檔案裡看是否安裝完成

babel-plugin-import 是一款 babel 外掛，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

# 安裝 babel-plugin-import 外掛
npm i babel-plugin-import -D  
 

    2.2  檔案.babelrc檔案配置

  "plugins":[
    "transform-runtime",
    ["import",{
      "libraryName":"vant",
      "libraryDirectory":"es",
      "style":true
    }]
  ],

更新了vue版本後。重新配置上述檔案

 "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }]]
  ]
 

頁面按需引入；

可以再main.js裡寫，也可以在引用的元件頁面寫，根據自己需求或喜好。我喜好第2種寫法

1.main.js:

2.或者在引用的元件頁面

<template>
    <div class="detail">
      <div class="slide">
        <van-swipe :autoplay="3000">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
    <van-button type="primary">主要按鈕</van-button>
    </div>
</template>

<script>
  import { Swipe,SwipeItem,Button } from "vant"
    export default {
      components:{
         [Button.name]:Button,
         [Swipe.name]:Swipe,
         [SwipeItem.name]:SwipeItem
      },
        data () {
            return {
            }
        },
        methods: {}
    }
</script>
<style scoped>
</style>
 

官方文件參考：https://youzan.github.io/vant/#/zh-CN/quickstart 點選開啟連結