微信小程序安裝Vant Weapp

• • • 1.打開微信開發(fā)者工具，找到app.js,右鍵在終端打開。
    • 2.在終端運行如下代碼
    • 3.上一步運行完成后，初始化
    • 4.找到工具，構(gòu)建npm，在本地設(shè)置npm模塊。
    • 5.步驟四 修改 app.json
    • 6.測試是否成功

1.打開微信開發(fā)者工具，找到app.js,右鍵在終端打開。

如圖，打開了項目的根目錄。

2.在終端運行如下代碼

# 通過 npm 安裝
npm i @vant/weapp -S --production

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

這一步很重要，如果沒有初始化是構(gòu)建不了npm的。

npm init

運行命令后一直按回車即可。

4.找到工具，構(gòu)建npm，在本地設(shè)置npm模塊。

5.步驟四 修改 app.json

將 app.json 中的 "style": "v2" 去除，小程序的新版基礎(chǔ)組件強行加上了許多樣式，難以去除，不關(guān)閉將造成部分組件樣式混亂。

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,
    });
  },
});

測試結(jié)果：

成功！