微信小程序安装Vant Weapp

微信小程序安装Vant Weapp

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

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, }, onChange(event) { this.setData({ value: event.detail, }); }, });

测试结果： 成功！