Vant Weapp网址

1 打开微信小程序终端 输入

npm init

此时你会发现你的目录多出了package.json文件

605f8470f92945feb9e8c94f131e8279.jpg

2.安装依赖

2.1 通过 npm 安装vant/weapp

npm i @vant/weapp -S --production

2.2 安装 miniprogram

npm i miniprogram-sm-crypto --production

安装完毕后，你会发现你的目录中又多些文件。

f784d9c36bee45eeab737f1a07d93450.jpg

2.3 修改 app.json

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

2.4 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./../你的项目名"![18deda34346349a1bf16766a0099103c.jpg](https://img.haomeiwen.com/i2084643/e021fae226da97dc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

      }
    ]
  }
}

2.5 构建 npm 我们点击左上角的工具栏

b050c5f1bc0b430ab1ff2f8807730ff5.jpg

构建成功后会出现下面的画面

b5beaf5dce94434d895b1d8b64043091.jpg

2.6然后点击右上角的详情---本地设置----使用npm模块

18deda34346349a1bf16766a0099103c.jpg

3.使用组件

我这里在全局里面注册一个按钮，然后使用它。先去app.json中注册

9b3c2b41ae4e450c95e2d113b97a5c11.jpg

找一个页面用一下这个按钮组件

微信截图_20220523101320.png