在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

# Vue 3 项目，安装最新版 Vant：
npm i vant -S 或者 yarn add  vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S 或者 yarn add vant@latest-v2

引入组件

方式一. 自动按需引入组件 (推荐,最好选择)

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

# 安装插件
yarn add babel-plugin-import -D 或者npm i babel-plugin-import -D

//看版本号在package.json里面

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory(看安装的vant版本号,这个配置现在一般不用,如需配置是在 babel.config.js里面配置如下代码)
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置(现在一般都是安装的  "@babel/core": "^7.12.16",版本都是7以上的,可以直接在文件中配置如下代码)
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

//例如:
//在main.js中引入
//按需引入vant-ui组件
import "vant/lib/index.css";
import { NoticeBar, Rate, Tab, Tabs } from "vant";
Vue.use(NoticeBar).use(Rate).use(Tab).use(Tabs);

方式二. 手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件。

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

方式三. 导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

如下代码在main.js中配置如下:

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

Vue.use(Vant);