微信小程序生成package.json文件，在微信小程序中引入vant Weapp组件...

1、首先用微信开发工具在文件中创建一个微信小程序。

2、执行npm init

执行npm init是需要在DOS窗口执行的，我们可以windows+r键来打开窗口，然后输入CMD执行，然后就可以打开DOS窗口了。打开窗口之后，在DOS窗口中进入自己项目所在的目录。在打开的文件夹输入 npm init，然后一直按回车键。直到创建一个package.json文件

3、通过npm安装,执行以下命令

# 通过 npm 安装 
npm i @vant/weapp -S --production

4、微信开发者工具中 构建npm包

4.1、点击构建npm

4.2、勾选使用npm模块

5、修改 app.json

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

6、修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

7、引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装

// app.json

"usingComponents": {

"van-button": "@vant/weapp/button/index"

}