携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
目前，微信小程序版本的移动端UI组件库有很多，像由微信官方团队提供的WeUI组件库、Vant Weapp、iView WeApp、ColorUI、MinUI等，每种组件库都有其特色。Vant Weapp其提供的UI组件库比较全面，并且比较符合我们项目中的UI设计，所以我们选择引用它。实际项目中大家可以根据自己项目的需求选择不同的UI组件库，或者自己进行封装符合自己项目的UI库。
下面，我们使用npm来进行Vant Weapp组件库的安装。
Vant Weapp的引用
- 通过npm安装@vant/weapp包
npm install @vant/weapp
- 微信小程序开发者工具中构建npm
我们都知道通过npm install安装的包会默认放置在node_modules目录下，但在微信小程序中，node_modules目录并不会参与到小程序的编译、上传以及打包这些流程当中。所以要想在微信小程序中使用npm，需要在微信开发者工具中进行npm的构建，构建完npm后会生成一个miniprogram_npm文件夹，里面会存放你构建的全部npm包，也就是小程序真正要使用的npm包。
如下图所示，在微信开发者工具的菜单栏中，选择工具菜单，然后选择构建npm选项：
构建完成后，会发现项目里会生成一个miniprogram_npm，里面包含我们刚刚使用npm安装的vant组件库，如下图所示：
Vant Weapp的使用
我们以Vant UI组件库中的输入框组件(Field)为例：
在需要使用Field组件的页面所对应的json文件中进行引入组件，如下index.json文件中所示：
"usingComponents": {
"van-field": "@vant/weapp/field/index"
}
然后在页面对应的wxml中就可以直接使用van-field了，如下：
<van-field
value="{{ value }}"
type="textarea"
placeholder="请输入留言内容"
show-word-limit
maxlength="500"
bind:change="handleChange"
/>
上述代码中，我们设置van-filed为一个textarea类型的输入框，输入字数限制在500个字符以内，并且在输入的过程中能够实时显示字数，页面展示如下：
至此，Vant Weapp在微信小程序中的引用和使用就简单介绍结束了，Vant Weapp中还有很多常用的组件，大家后续可以一一进行探索。
