open-index/open-npm huggingface dataset:
npm package: @gmkj/vant
Description: #### 介绍
Latest version: 0.0.1

# gm-vant

#### 介绍

冠美基础组件库。

本项目 copy 自vant-weapp@1.10.16。通过转换工具扩展到【京东】、【支付宝/淘宝】、【飞书/抖音】3 个平台版本。自第一次构建后，4 个平台独立维护。

---

## 使用之前

使用 Vant Weapp 前，请确保你已经学习过微信官方的 [小程序简易教程](https://developers.weixin.qq.com/miniprogram/dev/framework/) 和 [自定义组件介绍](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)。

---
## 安装

### 方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 [npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)

```bash
# 安装 支付宝/淘宝
npm i @gmkj/vant-my -S --production

# 安装 微信
npm i @gmkj/vant-wx -S --production

# 安装 飞书/抖音
npm i @gmkj/vant-tt -S --production

# 安装 京东
npm i @gmkj/vant-jd -S --production
```

### 方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码，并将 `dist` 目录拷贝到自己的项目中。

```bash
git clone https://gitee.com/chongqings_crown_and_beauty/gm-vant.git
```

## 使用组件

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可

```json
{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}
```

接着就可以在 wxml 中直接使用组件

```html
<van-button type="primary">按钮</van-button>
```

## 在开发者工具中预览

```bash
# 安装项目依赖
npm install

# 执行组件copy
npm run build
```

打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，把`/examples/wecaht`目录添加进去就可以预览示例了。