npm使用限制

1. 不支持依赖于Node.js内置库的包
2. 不支持依赖于浏览器内置对象的包
3. 不支持依赖于C++插件的包

安装vant组件库

vant Weapp官方文档：youzan.github.io/vant-weapp/…

安装vant组件库步骤

1. 通过npm安装（建议指定@1.3.3版本）
2. 构建npm包
3. 修改app.json

详细安装步骤参考官方快速上手教程：vant-contrib.gitee.io/vant-weapp/…

在开发者工具目录右键，打开选中窗口

初始化包配置文件

npm init -y

安裝包

npm i @vant/weapp -S --production
// 指定版本号
npm i @vant/weapp@1.3.3 -S --production

构建npm

注：小程序的包会安装到node_modules目录中，但小程序无法直接读取node_modules包，通过构建的方式，将包迁移到miniprogram_npm目录中，就可以使用这个目录下的npm包。为了每次构建不出现不必要的错误，每次构建前，都删除miniprogram_npm目录

修改app.json

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

使用vant组件库

引用组件库官方文档：vant-contrib.gitee.io/vant-weapp/… 安装完成后，可以在app.json的usingComponents节点中引入需要的组件，即可在wxml中直接使用。如引用button组件：

// app.json
"usingComponents": { "van-button": "@vant/weapp/button/index" }

// .wxml
<van-button type="primary">vant button</van-button>

css变量定制主题样式

参考文档：developer.mozilla.org/zh-CN/docs/…

定制全局主题样式

参考文档：vant-contrib.gitee.io/vant-weapp/…

在app.wxss中，写入css变量，即可全局生效：

// app.wxss
page{
  --button-danger-background-color:#c00000;
  --button-danger-border-color:#d60000;
}