在微信小程序中使用vant-weapp教程

1.首先在终端输入（这一步很重要。）

npm init -y

回车后，继续输入

npm i @vant/weapp -S --production

勾选【详情】中本地设置中的“使用npm模块”

导航栏中选择工具中的构建npm

这一步完成之后，会出现

注：！！

如果没有出现此文件夹，那么需要在project.config.json中去检查配置。因为如果没有该文件夹，会出现[ pages/tourismrow/index.json 文件内容错误] pages/tourismrow/index.json: ["usingComponents"]["van-button"]: "@vant/weapp/button/index" 未找到此类错误。

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

添加好后，再次进行构建npm。即可。

2.在idnex文件夹 index.wxml文件内

使用vant组件

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

3.在index.json（这是局部引用，也就是说只能在index这个页面使用）

内输入

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

即可使用vant组件。

4.全局引用。

在app.json中加入

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

这样的话，全局都可以使用了。