克隆仓库
克隆后，将dist目录下的所有文件复制到项目中的/static/vant/目录下，vant目录是我自己创建为了区分的
git clone https://github.com/youzan/vant-weapp.git注意:一定要确保复制完全了,我当时复制的时候common文件夹没复制过来,就出现错误了!
引入
直接在用的页面的main.json中引用了,这里的配置是根据我的目录结构来的,如果你和我前面的操作一致,那么直接复制粘贴就可以了,不然就要自己修改哦~
https://youzan.github.io/vant-weapp/#/intro官方文档,有些新功能更新,这里的引入可能还没加进来,大家可以自己去官方的网站看下
代码语言：javascript复制"usingComponents": {
"van-action-sheet": "/static/vant/cell-group/index",
"van-area": "/static/vant/area/index",
"van-badge": "/static/vant/badge/index",
"van-badge-group": "/static/vant/badge-group/index",
"van-button": "/static/vant/button/index",
"van-card": "/static/vant/card/index",
"van-cell": "/static/vant/cell/index",
"van-cell-group": "/static/vant/cell-group/index",
"van-checkbox": "/static/vant/checkbox/index",
"van-checkbox-group": "/static/vant/checkbox-group/index",
"van-col": "/static/vant/col/index",
"van-collapse": "/static/vant/collapse/index",
"van-datetime-picker": "/static/vant/datetime-picker/index",
"van-dialog": "/static/vant/dialog/index",
"van-field": "/static/vant/field/index",
"van-goods-action": "/static/vant/goods-action/index",
"van-goods-action-button": "/static/vant/goods-action-button/index",
"van-goods-action-icon": "/static/vant/goods-action-icon/index",
"van-icon": "/static/vant/icon/index",
"van-info": "/static/vant/info/index",
"van-loading": "/static/vant/loading/index",
"van-nav-bar": "/static/vant/nav-bar/index",
"van-notice-bar": "/static/vant/notice-bar/index","van-notify": "/static/vant/notify/index",
"van-overlay": "/static/vant/overlay/index",
"van-panel": "/static/vant/panel/index",
"van-picker": "/static/vant/picker/index",
"van-picker-column": "/static/vant/picker-column/index",
"van-popup": "/static/vant/popup/index",
"van-progress": "/static/vant/progress/index",
"van-radio": "/static/vant/radio/index",
"van-radio-group": "/static/vant/radio-group/index",
"van-rate": "/static/vant/rate/index",
"van-row": "/static/vant/row/index",
"van-search": "/static/vant/search/index",
"van-slider": "/static/vant/slider/index",
"van-stepper": "/static/vant/stepper/index",
"van-steps": "/static/vant/steps/index",
"van-submit-bar": "/static/vant/submit-bar/index",
"van-swipe-cell": "/static/vant/swipe-cell/index",
"van-switch": "/static/vant/switch/index",
"van-switch-cell": "/static/vant/switch-cell/index",
"van-tab": "/static/vant/tab/index",
"van-tabbar": "/static/vant/tabbar/index",
"van-tabbar-item": "/static/vant/tabbar-item/index",
"van-tabs": "/static/vant/tabs/index",
"van-tag": "/static/vant/tag/index",
"van-toast": "/static/vant/toast/index",
"van-tree-select": "/static/vant/tree-select/index"
}
使用
在页面中直接使用就ok了,只要和引入中命名一致
代码语言：javascript复制 <van-cell-group name="form-list">
<div class="form-item">
<label class="label-text" for="prizeName">奖品名称</label>
<van-field
class="input"
adjust-position="true"
input-align="right"
id="prize"
name="prizeName"
v-model="contactFormData.prizeName"
placeholder="请输入奖品名称"
/>
</div>
<div class="form-item">
<label class="label-text" for="prizeNumber">奖品数量</label>
<van-field
class="input"
adjust-position="true"
input-align="right"
id="prizeNumber"
name="prizeNumber"
type="number"
v-model="contactFormData.prizeNumber"
placeholder="请输入奖品数量"
onkeyup = "value=value.replace(/[^0-9]/g,'')"
onpaste = "value=value.replace(/[^0-9]/g,'')"
oncontextmenu = "value=value.replace(/[^0-9]/g,'')"
/>
</div>
<div class="form-item">
<label class="label-text" for="userName">联系人</label>
<van-field
class="input"
adjust-position="true"
input-align="right"
id="userName"
name="userName"
v-model="contactFormData.userName"
placeholder="请输入姓名"
/>
</div>
<div class="form-item">
<label class="label-text" for="mobile">联系电话</label>
<van-field
class="input"
adjust-position="true"
input-align="right"
id="mobile"
name="mobile"
type="number"
v-model="contactFormData.mobile"
placeholder="请输入联系电话"
maxlength="11"
/>
</div>
<div class="form-item">
<label class="label-text" for="goodsLink">商品链接</label>
<van-field
class="input"
adjust-position="true"
input-align="right"
id="goodsLink"
name="goodsLink"
v-model="contactFormData.goodsLink"
placeholder="请输入商品链接"
/>
</div>
<div class="form-item h200">
<label class="label-text" for="prize">备注信息</label>
<van-field
class="input-big"
adjust-position="true"
type="textarea"
id="remark"
name="remark"
v-model="contactFormData.remark"
rows="2"
autosize
placeholder="请输入备注信息"
/>
</div>
</van-cell-group>不要忘记，引入后重新编译一下哦！
