微信小程序VantUI

1.安装vant/weapp

npm i @vant/weapp -S --production

2.project.config.json

      由于开发者使用开发工具创建项目的时候，项目根目录 默认为 miniprogram，package.json 在项目外部，会导致npm 无法正常工作。需要手动在 project.config.json 内添加如下图配置，使得开发工具可以正确索引到 npm所依赖的位置。

{
   ...
 "setting": {
    "packNpmManually": false,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
   ...
}

3. app.json

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

在app.json 中添加代码：

"usingComponents": {
    "van-button": "@vant/weapp/button/index"
}

4.构建npm

工具-构建npm

5.使用组件

<van-button type="primary">按钮</van-button>