<meta charset="utf-8">
1.获取appid
1.png
2.png
2.创建小程序项目
3.png
4.png
5.png
项目创建成功
6.png
3.构建 npm
3.1打开终端，初始化项目，生成pack.json文件
7.png
3.2 通过npm安装vant weapp(这一步是必须要有的，否则构建npm会报错)
通过 npm 安装 npm i @vant/weapp -S --production
8.png
3.3微信开发者工具点击右上角详情--本地设置--勾选使用npm模块
9.png
3.4构建npm
10.png
11.png
注意：3.2那个步骤是必须要有的，否则构建npm会报错，报错如下：
12.png
此时项目目录
13.png
4.安装vant weapp
14.png
4.1安装vant weapp
因为3.2已经安装过vant weapp，直接继续下面步骤
4.2 修改 app.json
将 app.json 中的 "style": "v2" 去除，
15.png
4.3修改 project.config.json
手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
16.png
4.4最好重新构建npm一次，防止报错，但不一定会有问题
执行3.4步骤
5.引入组件
以 Button 组件为例
全局引入（推荐）
在app.json中引入组件，
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
局部引入
假如你想在index页面使用button组件，在index.json中引入组件，
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
6.在页面中引入组件
假如想在index.wxml中使用button组件
index.wxml
<view class="container">
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</view>
17.png
