微信小程序安装Vant Weapp

• • • 1.打开微信开发者工具，找到app.js,右键在终端打开。
    • 2.在终端运行如下代码
    • 3.上一步运行完成后，初始化
    • 4.找到工具，构建npm，在本地设置npm模块。
    • 5.步骤四 修改 app.json
    • 6.测试是否成功

1.打开微信开发者工具，找到app.js,右键在终端打开。

如图，打开了项目的根目录。

2.在终端运行如下代码

# 通过 npm 安装
npm i @vant/weapp -S --production

3.上一步运行完成后，初始化

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

npm init

运行命令后一直按回车即可。

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

5.步骤四 修改 app.json

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

6.测试是否成功

wxml

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

json

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

js

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

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

测试结果：

成功！