# miniprogran-vant-example

**Repository Path**: sublun/miniprogran-vant-example

## Basic Information

- **Project Name**: miniprogran-vant-example
- **Description**: 微信小程序+vant组件的例子
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: 初次导入
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-06-21
- **Last Updated**: 2021-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在微信小程序中使用vant组件
## vant小程序组件
url：
`https://youzan.github.io/vant-weapp/#/quickstart`

## 创建工程步骤
* 1、使用开发者工具创建小程序工程
* 2、在小程序目录中执行:
   `npm init`
   一路回车就可以了。
* 3、在工程中添加vant组件，执行命令: 
    `npm i vant-weapp -S --production`
* 4、在开发工具中点击`工具`-->`构建npm`
![408e13ae408cfeeae4b08a25f1dc65ef.png](en-resource://database/4186:1)

同时项目根目录中会多出一个目录“miniprogram_npm”，这个就是小程序可以识别的npm第三方库。
![bcbfb93662328cc9fedba56a05bdf10e.png](en-resource://database/4190:1)

* 5、勾选“使用 npm 模块”选项：
![42f275d72d33cd889760843249cbeee7.png](en-resource://database/4188:1)
* 6、这时候当我们需要在一个页面中调用vant组件，那么就要在对应的页面json中添加类似如下配置：
![5a69d5ea7e31fda8cb4372823c68ec01.png](en-resource://database/4192:1)
````
{
    "usingComponents": {
        "van-button": "/miniprogram_npm/vant-weapp/button/index"
    }
}
````

* 7、接着你就可以在wxml中直接调用这个ui组件了。
![693662d0043c275707b2eb3c7d12f790.png](en-resource://database/4194:1)