天天看點

mpvue 引入 vant-weapp 踩坑記錄

作者:kiss雪夜

原文位址:https://www.cnblogs.com/yummylucky/p/12873313.html

1、下載下傳vant-weapp

  兩種下載下傳方式:

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

    第二種: npm install vant-weapp 

2、找到下載下傳的檔案夾,将 vant-weapp的dist目錄 丢進 項目的static目錄

3、在 需要引入的pages下某個頁面目錄下,建立main.json 檔案,内容如下:

{
  "usingComponents": {
      "van-button": "/static/vant/button/index",
      "van-cell": "/static/vant/cell/index",
      "van-cell-group": "/static/vant/cell-group/index",
      "van-popup": "/static/vant/popup/index",
      "van-datetime-picker": "/static/vant/datetime-picker/index",
      "van-field": "/static/vant/field/index",
      "van-picker": "/static/vant/field/index",
      "van-dialog": "/static/vant/dialog/index",
      "van-toast": "/static/vant/toast/index"
  }
}
// 根據自己的目錄進行配置      
mpvue 引入 vant-weapp 踩坑記錄

4、打開微信小程式開發工具,選擇 

設定(settings)-- 項目設定(project settings) -- 勾選 [ 'tanspile es6 to es5', 'use NPM module'] 

mpvue 引入 vant-weapp 踩坑記錄
mpvue 引入 vant-weapp 踩坑記錄