1.安装

在项目中使用Vant时，可以通过npm进行安装

vue2需指定版本，vue3下载最新版即可。

# vue2项目
npm i vant@latest-v2 -S

也可以使用图形化工具vue ui 安装

2.引入组件

引入组件分为按需引入和一次性导入所有组件

按需引入分为自动按需引入和手动按需引入

自动按需引入

1.安装插件

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

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

2.添加配置

在vant官网说明的是在.babelrc中添加配置

.babelrc现已更名为bable.config.js

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

可以在代码中直接引入组件

插件会自动帮我们引入对应的css样式

// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

手动按需引入

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

一次性导入所有组件

但是一次性引入所有组件会增加代码包体积，因此不推荐。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Tips: 配置按需引入后，将不允许直接导入所有组件。

按照上述要求即可使用vant组件啦。