本文共 988 字，大约阅读时间需要 3 分钟。

微信小程序Vant Weapp配置及使用

1. 安装npm

如未安装npm，请先安装npm，下载地址：http://nodejs.cn/download/

2. 在小程序根目录打开终端窗口输入：mpm init 初始化npm，会出现确认信息全部回车。

3. 通过nmp安装Vant 安装命令：npm i @vant/weapp -S --production 4. 修改app.json 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

5. 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。 需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
   		  ...		  "setting": {
   		    ...		    "packNpmManually": true,		    "packNpmRelationList": [		      {
   		        "packageJsonPath": "./package.json",		        "miniprogramNpmDistDir": "./miniprogram/"		      }		    ]		  }		}

6. 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，点击构建npm 模块 选项。

7. 使用npm模块

在微信开发者工具右上侧点击 详情–>本地设置–>勾选使用npm模块。 完成以上操作可配置完Vant Weapp

8. 在开发中使用Vant Weapp

   例如：使用一个Button

   1）在页面.json文件的usingComponents中引入

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

   2）在.wxml文件中使用

        	
         
          默认按钮
         	
         
          警告按钮
         
        

转载地址：http://gnsvi.baihongyu.com/