vue2引入vant 

1. npm i vant -S
2. npm i babel-plugin-import -D
3. 找到后缀名为.babelrc的文件
    

   //在原本代码后面补充这段代码
   "plugins": [
       ["import", {
         "libraryName": "vant",
         "libraryDirectory": "es",
         "style": true
       }]
     ]
   
   
   
   //补充完后效果
   {
     "presets": [
       ["env", {
         "modules": false,
         "targets": {
           "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
         }
       }],
       "stage-2"
     ],
     "plugins": ["transform-vue-jsx", "transform-runtime", ["import", {
       "libraryName": "vant",
       "libraryDirectory": "es",
       "style": true
     }]]
   }
   

4.  引入成功后，使用步骤如下
    

   <template>
     <div class="home">
       <img alt="Vue logo" src="../assets/logo.png" @click="go">
       <van-button type="primary">主要按钮</van-button>
       <van-button type="success">成功按钮</van-button>
       <van-button type="default">默认按钮</van-button>
       <van-button type="warning">警告按钮</van-button>
       <van-button type="danger">危险按钮</van-button>
     </div>
   </template>
   
   <script>
   // @ is an alias to /src
   import { Button } from 'vant';
   export default {
     name: 'Home',
     methods:{
       go(){
         this.$router.push("/about");
       }
     },
     components:{
       "van-button":Button
     }
   }
   </script>
   

   ---

   vue3引入vant 

•  npm i vant@next -S
   

• main.js / main.ts中引入
   

  import Vant from 'vant';
  import 'vant/lib/index.css';
  createApp(App).use(store).use(Vant).use(router).mount("#app");

•  组件中使用

  <template>
    <div class="home">
      <img alt="Vue logo" src="../assets/logo.png" @click="go">
      <van-button type="primary">主要按钮</van-button>
      <van-button type="success">成功按钮</van-button>
      <van-button type="default">默认按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
    </div>
  </template>
  
  <script>
  // @ is an alias to /src
  import { Button } from 'vant';
  export default {
    name: 'Home',
    methods:{
      go(){
        this.$router.push("/about");
      }
    }
  }
  </script>