微信小程序如何引入vant weapp?

2023年6月3日修改

vant weapp官方文档：https://youzan.github.io/vant-weapp/#/quickstart

步骤一 通过 npm 安装
安装之前，现在微信开发者平台创建项目。项目需要打开，需要在当前目录下，打开终端，首先需要初始化命令，初始化命令为 npm init -y (-y表示是在安装过程中，如果需要选择（y/n)时，自动选择y。（非常重要的一步，一定要先初始化，再进行下面的步骤，不然到最后会报错！）

通过 npm 安装

npm i @vant/weapp -S --production

步骤二 修改 app.json

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

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
…
“setting”: {
…
“packNpmManually”: true,
“packNpmRelationList”: [
{
“packageJsonPath”: “./package.json”,
“miniprogramNpmDistDir”: “./miniprogram/” //在这里需要注意的是miniprogram是项目名字
}
]
}
}

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

注意：在构建npm包的时候，直接构建，会构建失败。所以，需要修改一下 project.config.json 下刚刚配置过的文件。

将这个路径名字改为当前目录下。

步骤五 引入组件

在app.json 或者 index.json中添加
“usingComponents”: {
“van-button”: “@vant/weapp/button/index”
}

两者的区别是在app.json中引入，全局都可以生效。在index.json中使用，则只有那个页面才生效。