微信小程序使用 Vant Weapp1、项目文件夹生成 package.json 文件 package.json 文件

1、项目文件夹生成 package.json 文件

package.json 文件，是 npm 用来管理依赖关系和版本的文件。它记录了项目中所有依赖包的详细信息，包括版本号、下载地址等，以及它们之间的依赖关系。这样，在其他开发人员或机器上重新安装项目时，就能保证所有依赖包的版本一致。

npm init -y

2、安装 Vant-weapp

npm i @vant/weapp -S --production

3、修改 project.config.json

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

4、构建 npm 包

5、.json 文件引入组件

这时候要注意要使用组件的路径

// json 文件
"usingComponents": {
  "van-button": "/miniprogram_npm/@vant/weapp/button/index" //注意路径
  }

// wxml 文件 使用
<van-button type="danger">危险按钮</van-button>

设置组件按需注入

当我们进行程序的预览时，会进行代码质量扫描，扫描的结果会得出让你启动组件按需注入

这时候可以在 app.json 文件写入 "lazyCodeLoading": "requiredComponents" 进行配置

微信小程序 使用 Vant Weapp