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

微信小程序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文件中使用

   <view>
   	<van-button type="default">默认按钮</van-button>
   	<van-button type="warning">警告按钮</van-button>
   </view>