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"]
  }
}