微信小程序中使用Vant Weapp组件库（保姆式教学）

一、安装

1、打开终端：

• 点击调试器最右侧这个终端按钮，可以打开终端

2、执行安装命令

• 通过 npm 安装

npm i @vant/weapp -S --production

• 通过 yarn 安装

yarn add @vant/weapp --production

执行结束我们会发现报错了：

npm WARN saveError ENOENT: no such file or directory, open '/Users/zhangguibao/package.json'

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

1、找到 project.config.json 文件，在 setting 中按照如下配置项：

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

2、在终端执行 npm init 项目根目录下会添加一个package.json文件
3、再次执行npm i @vant/weapp -S --production完成安装

项目目录如下：

二、构建 npm 包

步骤： 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

三、引入组件

在app.json文件中添加：

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

四、使用组件

在需要使用组件的页面的.wxml文件中使用：

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

五、效果：