小程序第三方 UI 框架之 Vant Weapp 的使用（图文并茂）

前言

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用

官方文档： https://youzan.github.io/vant-weapp/#/intro

安装

1、在项目目录打开终端，输入：

npm init -y

如图：

回车就会生成 package.json 文件

2、安装 Vant Weapp

npm i vant-weapp -S --production

3、安装成功后，在微信开发者工具中， 点击工具 / 构建npm


4、完成构建后，详情 / 本地设置 / 使用 npm 模块

使用

1、以 Button 组件为例，只需要在app.json或index.json中注册 button 组件

“van-button”: “vant-weapp/button”

2、然后再index.wxml 中使用组件就行咯！！

注：小程序的新版基础组件强行加上了许多样式，会导致部分组件样式混乱，建议直接将 app.json 中的 "style": "v2" 去除