初始化项目

在项目目录下npm init,然后按需填写项目名称作者等信息,你也可以一路回车,最后会生成一个package.json文件,里面可以修改信息。

通过NPM安装

然后按照Vant官网的方法npm i @vant/weapp -S --production来安装。Vant官网还提供了yarn安装方法,有需要可以去官网查阅。

修改app.json

将app.json中的"style": "v2"去除,Vant官方的解释是:小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

构建NPM

安装完成之后点击微信开发者工具上面的工具=>构建npm,构建完成后根目录会生成一个miniprogram_npm文件夹,里面包含了Vant文件夹。

修改project.config.json

手动在project.config.json的"setting"下修改如下配置(如没有就自信添加),使开发者工具可以正确索引到 npm 依赖的位置。

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

使用方法

以Button 组件为例,只需要在app.json或index.json中配置Button对应的路径即可。

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
<van-button type="primary">按钮</van-button>