手把手教你_微信小程序使用 Vant Weapp 组件库

Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。https://youzan.github.io/vant-weapp/#/intro

Vant Weapp 链接: https://youzan.github.io/vant-weapp/#/intro.

两种使用方法

1.下载到本地，放置到小程序文件根目录下

下载链接: https://github.com/youzan/vant-weapp.

然后在json文件中引入组件

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

2.安装npm

没有安装 nodejs 的朋友，先自行安装nodejs

安装了homebrew的MAC朋友

在终端输入

brew install node

检验是否安装成功

node -v

安装好nodejs以后，我们来安装npm；npm必须安装在每个微信小程序的根目录，我们cd到小程序的根目录以后：

npm i @vant/weapp -S --production

安装完成以后来看看npm版本

npm -v

安装完以后，就可以顺利查询到版本了。

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

然后在json文件中引入即可使用，现在就按照开发文档的提示，开始使用吧。

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