1. 小程序对 npm的支持与限制
image.png
2. 什么是Vant Weapp
image.png
官方文档地址：https://youzan.github.io/vant-weapp
3. 安装vant
3.1. 初始化npm包管理工具
npm init -y
3.2. 安装want--指定一下版本号
npm i @vant/weapp@1.3.3 -S --production
3.3. 修改 app.json
将
app.json中的"style": "v2"去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
3.4. 修改 project.config.json（不一定需要此步骤--根目录有miniprogram才需要配置）
开发者工具创建的项目，
miniprogramRoot默认为miniprogram，package.json在其外部，npm构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
3.5. 构建 npm 包
从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。
很多盆友使用的是较新或是最新版本的微信开发真工具，而新版本的微信开发者工具已经默认支持npm了，不需要再手动配置修改选项了。现在使用微信开发者工具可以直接通过 npm i 安装模块，然后进行构建npm就可以了了。
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
image.png
3.6. typescript 支持（非必须）
如果你使用
typescript开发小程序，还需要做如下操作，以获得顺畅的开发体验。
安装
miniprogram-api-typings
# 通过 npm 安装
npm i -D miniprogram-api-typings
# 通过 yarn 安装
yarn add -D miniprogram-api-typings
在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。
请将
path/to/node_modules/@vant/weapp修改为项目的node_modules中@vant/weapp所在的目录
{
...
"compilerOptions": {
...
"baseUrl": ".",
"types": ["miniprogram-api-typings"],
"paths": {
"@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
},
"lib": ["ES6"]
}
}
