微信小程序安装Vant Weapp

分手后的思念是犯贱 2022-12-11 15:24 181阅读 0赞

### 微信小程序安装Vant Weapp ###

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center]  
如图，打开了项目的根目录。

### 2.在终端运行如下代码 ###

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

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

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

npm init

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

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

![在这里插入图片描述][20201003230504477.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center 1]

### 5.步骤四 修改 app.json ###

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

### 6.测试是否成功 ###

wxml

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

json

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

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

测试结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center 2]  
成功！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/bd3a191999414b14bdf094ce0454bef9.png
[20201003230504477.png_pic_center]: /images/20221123/6aa7506340df4e479ca52d833a9cb390.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/f2e23c0292e74e6ca2d83fe0ebad18e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/fae8ba79d0ba481e854c3083e4a92b74.png