Vant是轻量、可靠的移动端 Vue 组件库，安装使用可以参照官方文档进行，但是我发现文档不是很全面，所以自己在这里记录一下

vue使用Vant主要有四种方式，第四种通过CDN引入方式，这里不做介绍，主要是下面这三种：

1，自动按需引入组件（灵活，体积小，官方推荐，需安装插件）

2，手动按需引入组件（不安装插件情况使用）

3，全局导入所有组件（会增加代码包体积，官方不推荐）

###在使用之前，首先安装，可以通过npm或yarn

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add vant

1，自动按需引入组件（灵活，体积小，官方推荐，需安装插件）

 该方法需要使用babel-plugin-import插件，首先安装插件

# 安装babel-plugin-import插件
npm i babel-plugin-import -D

 安装完成之后需要配置，有两种方式：

      》vue 3.0以上版本，使用的是babel7，可以在babel.config.js文件中进行配置，如下：

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

      》对于vue3+  及 babel7 以下版本可以在.babelrc 中添加配置，如下：

module.export = {
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

 接着你可以在代码中直接引入 Vant 组件， 插件会自动将代码转化为方式二中的按需引入形式，依然有两种方式：

// 在单个组件中使用（试用使用次数不多的类型）
import Button from 'vant/lib/button'; // 引入
import 'vant/lib/button/style';

components: { // 注册
  [Button.name]: Button
}
// 可直接在页面使用，如：<van-button type="primary">Button</van-button>

// 如果使用次数很多，那么可以在main.js中引入，这样就不需要在每个组件中单独引用了
import { Button } from 'vant'
Vue.use(Button)

2，手动按需引入组件（不安装插件情况使用）

 这种方式不需要安装插件，引入方式如下：

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

 3，全局导入所有组件（会增加代码包体积，官方不推荐）

 这里有一个需要注意的地方，就是配置按需引入后，将不允许直接导入所有组件，所以你直接如果有设置过按需引入，这里首先要做的就是： 

    1，注释或删除之前的按需引入方式。

    2，注释或删除之前插件花按需引入方式配置的东西，就是在.babelrc文件或者babel.config.js文件中写入的代码。

    3，重新启动一次项目。

    4，在main.js中，重新引入，如下：

// 全局导入所有组件     main.js文件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

接下来就开始愉快的使用吧~~~