微信小程序引入Vant组件库

给大家介绍一下如何引入vant

1.初始化package.json

//初始化
npm init -y
//下载vant
npm i @vant/weapp -S --production

2.启用npm

4.构建npm

5.接下来就是配置

(1) 修改app.json把"style"："v2"去除

(2) 修改 project.config.json

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

(3) 引入组件，建议在app.json引入全局

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

(4) 使用

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

引入成功！

如果有按钮但是没有样式

在app.json里的"lazyCodeLoading": "requiredComponents"去掉