vant-ui按需引入

1.安装

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

Vue 2 项目，安装 Vant 2：
npm i vant -S
Vue 3 项目，安装 Vant 3：
npm i vant@next -S

yarn安装

yarn add vant -S

2.引入组件

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

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

yarn安装

yarn add babel-plugin-import -D

在.babelrc 中添加配置
注意：webpack 1 无需设置 libraryDirectory

接着你可以在代码中直接引入 Vant 组件
插件会自动将代码转化为方式二中的按需引入形式
在src文件中新建一个plugin文件夹，创建vant.js用来放引入的插件

3.全局引入

在全局的main.js中import引入

4.组件中使用

<van-button type="primary">主要按钮</van-button>

效果如图所示：