vant的引入

1.安装vant

npm i vant -S：这是简写形式。
npm install vant --save:这是完整写法。

如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。
JavaScript

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

淘宝镜像，速度快，安装后查看package.json文件里看是否安装完成

2.1使用babel-plugin-import (推荐)

babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

JavaScript

安装 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:

import { Button } from 'vant'
Vue.use(Button)

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>