安装Vant Weapp

1. 安装Vant组件库

1.1 通过npm安装（建议指定版本为@1.3.3）

  1. 在小程序开发工具的资源管理界面，右键，点击“在外部终端窗口中打开”，定位到项目，并打开终端。

  1. 初始化npm的package.json

    npm init -y

  1. 指定版本号安装vant组件
npm i @vant/weapp@1.3.3 -S --production

1.2 修改app.json

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

1.3 修改 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配置为'./'即可

1.4 构建npm包

1.5 引入组件

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
Last modification：April 16th, 2022 at 08:27 pm
© 允许规范转载