一、安装
1、打开终端：
- 点击调试器最右侧这个终端按钮，可以打开终端
2、执行安装命令
- 通过 npm 安装
npm i @vant/weapp -S --production
- 通过 yarn 安装
yarn add @vant/weapp --production
执行结束我们会发现报错了：
npm WARN saveError ENOENT: no such file or directory, open '/Users/zhangguibao/package.json'
解决： 开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
1、找到 project.config.json 文件，在 setting 中按照如下配置项：
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
2、在终端执行 npm init 项目根目录下会添加一个package.json文件
3、再次执行npm i @vant/weapp -S --production完成安装
项目目录如下：
二、构建 npm 包
步骤： 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
三、引入组件
在app.json文件中添加：
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
四、使用组件
在需要使用组件的页面的.wxml文件中使用：
<van-button type="primary">按钮</van-button>
五、效果：
