微信小程序如何使用第三方ui库

我们拿vant举例子---Vant Weapp - 轻量、可靠的小程序 UI 组件库

1，第一步 下载vant

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

2，第二步 

步骤二 修改 app.json

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

3，第三步

步骤三 修改 project.config.json

找到 里面的 setting：{} -----在里面写上:"packNpmManually": true,

再写上：

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

4，第四步

步骤四 构建 npm 包

没显示右边的图就不用管他

5，这个时候可能会报错   没报错就继续第六步

报错了：找到  setting：{}里面的  packNpmRelationList  把里面的东西重新设置一遍再保存就可以了--和第三步一样

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

 

6，使用  全局使用就在  app.json中的  usingComponents 中挂在  用啥功能挂啥

然后到要用的地方 直接  <van-button type="info">信息按钮</van-button>