1.安装 Vant Weapp 的步骤

1. npm 安装 Vant Weapp
2. 修改 app.json
3. 构建 npm 包
4. 引入组件
5. 验证

npm 安装 Vant Weapp

npm i @vant/weapp -S --production

修改 app.json

将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

构建 npm 包，点击 工具 -> 构建 npm

找到project.config.json文件配置packNpmManually和packNpmRelationList

{
  "setting": {
    ……
    },
    "userConfirmedBundleSwitch": false,
    "packNpmManually": true,     // 手动打包 npm 包
    "packNpmRelationList": [      // npm 包需要手动打包以及它们的依赖关系
      {
        "packageJsonPath": "./package.json",  
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],
  }
}

引入组件

// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

验证

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

2.常见问题

1. 使用构建npm时，报错没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 miniprogramRoot 目录内，或配置 project.config.json 的 packNpmManually 和 packNpmRelationList 进行构建 [1.06.2402040][darwin-x64]

原因：执行构建的时候在根目录下没有找到文件，因为原则上小程序需要package.json和app.json在同一个目录下的，由于项目中并没有在同一个目录结构下，因此npm构建失败了，只要改 packNpmManually 和 packNpmRelationList 的地址就好。

"setting": {
……
"packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
}

2. Vant Weapp 引入以后还是不能使用
   原因：可能是项目还没有编译好，可以关闭开发工具，然后重启即可。