文章目录

• • 1、安装
  • 2、输入`npm init --yes`完成初始化
  • 3、回到微信开发者工具
  • 4、修改 app.json
  • 5、测试

1、安装

右键打开小程序根目录：

输入：npm i @vant/weapp -S --production 安装

2、输入npm init --yes完成初始化

这一步很重要，如果没有初始化是构建不了npm的

3、回到微信开发者工具

找到工具，构建npm，在本地设置npm模块

4、修改 app.json

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

5、测试

vant官网：https://vant-contrib.gitee.io/vant/#/zh-CN/button

wxml

<van-rate value="{{ value }}" bind:change="onChange" />

json

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

js

Page({
  data: {
    value: 3,
  },

  onChange(event) {
    this.setData({
      value: event.detail,
    });
  },
});

测试结果：