微信小程序内使用vantUI

vant微信版官网：

https://youzan.github.io/vant-weapp/

1：初始化项目

打开终端cd到项目根目录，运行 npm init ，然后配置相关信息，可以全部回车。

2：安装npm

npm install --production

3：安装vantUi

npm i @vant/weapp -S --production

4：构建npm包

在微信开发者工具内点击工具->构建npm。

等待数秒后构建完成。

5：修改app.json文件

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

6：使用组件

在需要使用的页面的json配置文件内引入组件，或者直接在app.json内全局引入组件。

例如，引入btn组件

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

然后在wxml内使用组件即可。

按钮

效果如下：