微信小程序使用vant组件库的流程

1、创建小程序

• 小程序AppId：wx50fd5ed9e25abb6c
• 秘钥：237a0ee70703902980ca477a8e790ec7

2、在小程序根目录中新建miniprogram文件夹，并将相应的文件放入到新建文件夹中去。

3、小程序根目录中初始化npm init -y 并使用npm安装vant

    npm init -y   // 初始化npm
    npm i @vant/weapp -S --production   // 安装vant

4、修改app.json。

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

5、修改 project.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,   // 开启手动构建
    "packNpmRelationList": [   // 手动构建的相关配置
      {
        "packageJsonPath": "./package.json",       // 指定package.js的位置/目录
        "miniprogramNpmDistDir": "./miniprogram/"  // 指定打包后的命令/位置
      }
    ]
  }，
  "miniprogramRoot": "miniprogram/",   // 更改根目录指向
}

7、在app.json中添加需要使用的vant组件

  "usingComponents": {
    "authorization": "/components/authorization/authorization",
    "van-button": "@vant/weapp/button/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  }

8、点击开发中工具设置 -> 构建npm。为保证顺利进行可以先清除缓存再进行编译