mpvue——引入vant_weapp组件

克隆仓库

克隆后，将dist目录下的所有文件复制到项目中的/static/vant/目录下，vant目录是我自己创建为了区分的

git clone https://github.com/youzan/vant-weapp.git

注意:一定要确保复制完全了,我当时复制的时候common文件夹没复制过来,就出现错误了!

引入

直接在用的页面的main.json中引用了,这里的配置是根据我的目录结构来的,如果你和我前面的操作一致,那么直接复制粘贴就可以了,不然就要自己修改哦~

https://youzan.github.io/vant-weapp/#/intro官方文档,有些新功能更新,这里的引入可能还没加进来,大家可以自己去官方的网站看下

"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了,只要和引入中命名一致

 <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>

不要忘记，引入后重新编译一下哦！