1. 打开小程序开发工具，创建新的小程序项目 applet-project
2. 在项目文件夹下初始化 package.json 文件
npm init
3. 安装 @vant/weapp
npm i @vant/weapp -S --production
4. 在微信开发工具中配置 npm模块
Snipaste_2021-10-27_13-12-40.jpg
5. 点击微信开发工具顶部 工具 =>> 构建npm
Snipaste_2021-10-27_13-15-40.jpg
- 完成上述步骤即可在项目中引入所需要的组件
组件使用步骤：
使用前按照官网说法需要进行如下配置：
- 修改 app.json
将 app.json 中的"style": "v2"去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
- 引入组件，只需要在app.json(全局引入)或index.json中引入需要的组件即可。
- 以 Button 组件为例
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
- 使用组件，引入组件后可以下wxml中使用。
// index.wxml
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
-
页面正常显示即引入成功。
Snipaste_2021-10-27_13-42-39.jpg
