mpvue 引入 vant-weapp

​​mpvue 引入 vant-weapp​​

作者：kiss雪夜

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

// 根據自己的目錄進行配置      

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>      

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

第一步：添加vant元件

回到剛才的指令視窗，還是依舊在項目目錄下面，添加vant元件的依賴

$ cnpm i vant-weapp -S --production
      

執行後，可以進入package.json檔案，檢視dependencies是不是已經包含了vant-weapp，有的話，說明添加成功。接下來，打開項目裡的build/webpack.base.conf.js檔案，在baseWebpackConfig.plugins數組裡增加多一個CopyWebpackPlugin。主要是為了mpvue在編譯成微信小程式開發語言的時候，也順帶把vant元件複制到目錄裡，這樣的話才能被項目找到。

new CopyWebpackPlugin([ { from: resolve('node_modules/vant-weapp/dist'), to: resolve('dist/wx/vant-weapp/dist'), ignore: ['.*'] } ])       

正确姿勢

第二步：代碼裡引用vant

在src/app.json檔案用全局引用某個元件，比如按鈕元件

　　"usingComponents": {

　　　　"van-button": "vant-weapp/dist/button/index" 

　　}

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

// 根據自己的目錄進行配置