微信小程序中安装vant

以下是微信小程序中安装 Vant 的详细步骤：

1. 初始化项目

在微信小程序项目目录下，打开终端，执行以下命令进行项目初始化：

npm init -y

该命令会快速生成一个默认的package.json文件，-y参数表示直接使用默认配置，无需手动输入信息。

2. 安装 Vant 相关依赖

继续在项目目录下的终端中，执行以下命令安装 Vant Weapp：

npm i @vant/weapp -S --production

此命令会将 Vant Weapp 作为项目的生产依赖安装到node_modules目录中。

3. 修改app.json

打开项目根目录下的app.json文件，找到并删除其中的"style": "v2"字段。因为小程序的新版基础组件会强行加上许多样式，难以覆盖，不删除可能会导致部分组件样式混乱。

4. 修改project.config.json

由于微信开发者工具创建的项目中，miniprogramRoot默认为miniprogram，而package.json在外部，导致 npm 构建无法正常工作。需要在project.config.json文件中手动添加以下配置，以便开发者工具可以正确索引到 npm 依赖的位置：

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

注意：对于新版开发者工具，miniprogramNpmDistDir配置为"./"即可。

5. 构建 npm

打开微信开发者工具，点击"工具"->"构建 npm"，并勾选"使用 npm 模块"选项。构建成功后，即可在项目中使用 Vant 组件。

6. 使用组件

全局引入

在app.json中添加需要使用的组件路径，例如：

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

这样，在任意页面的wxml文件中都可以直接使用van-button组件。

局部引入

如果只想在某个页面使用某个组件，可以在该页面的json文件中进行引入，例如：

{
    "usingComponents": {
        "van-slider": "@vant/weapp/slider/index"
    }
}

然后在该页面的wxml文件中使用van-slider组件。

至此，Vant 组件库就成功安装并可以在微信小程序中使用了。