<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