HeadlessUl组件库地址

虽然微信小程序有自带的组件库，但是有时候用已经封装好了的组件库更加方便快捷。
市面上有很多UI库，我使用的是Vant组件库。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。而我们要使用的是 微信小程序版本

Vant Weapp

一、安装Vant

1.1 打开cmd进入项目文件夹

1.2 输入命令 npm init，初始化一个package.json文件。可以一直回车，也可以输入你想输入的信息。

1.3 输入命令npm i @vant/weapp -S --production 安装vant

1.4 将 app.json 中的 “style”: “v2” 去除

1.5 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

1.6 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

二、引入Vant组件

如果想引入一个button组件，查看vant组件库的官方文档，在json文件中完成引入，wxml文件中直接使用，如果是多个页面需要用到的组件，直接在app.json中进行全局引入。

实际使用如下：

官方文档下方有该组件的各种API，props、event以及外部样式类

三、修改vant组件的样式

修改vant组件的默认样式有几种方法：

第一种是使用它提供的外部样式类，例如button组件，有custom-class和loading-class两个外部样式类

自定义类名，然后修改成自己想要的样式

第二种是，有的组件修改样式的props，例如Divider组件

这种直接在props中写入自己想要修改成的属性即可

第三种，强制修改

通过控制台找到vant组件的class名称

wxml中，在vant组件外包一层class，通过.class .vant组件class名称修改样式

---

注：如果是引入已存在的小程序，只需要npm install，构建npm这两步即可