mpvue 引入 vant-weapp

作者：kiss雪夜

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

1、下載vant-weapp

　　兩種下載方式：

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

　　　　第二種：npminstallvant-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"
  }
}
// 根據自己的目錄進行配置

4、開啟微信小程式開發工具，選擇

設定（settings）-- 專案設定（project settings） -- 勾選 [ 'tanspile es6 to es5', 'use NPM module']

在mpvue中引用vant weapp

使用mpvue作為框架，引入第三方的ui框架 vant-weapp

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

下載vant-weapp的資源:https://github.com/youzan/vant-weapp.git

1、

2、

3、

4、全選複製

5、進入自己的專案的static資料夾

6、新建一個vant資料夾

7、把剛才複製的所有東西，丟進去

8、專案如圖：

9、單個頁面中建立main.json檔案

10、使用的元件名稱引入

{
    "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"
    }
}
 

  <van-cell title="姓名" is-link>
                <div>
                    <input type="text">
                </div>
            </van-cell>

-------------------------------------分割線------------------------------------------------------------