uni-app開發手機App時使用vant

1、使用uni-app創建項目，然后，在項目根目錄創建 wxcomponents 文件夾(名稱不可更改)，，注意該目錄和pages目錄平級，然后在該目錄下，再新建vant目錄。

2、到https://github.com/youzan/vant-weapp下載最新的壓縮包，然后將壓縮包內的dist文件夾直接拷入vant文件中，格式如下圖（不是必須這樣做，只是為了文件目錄結構清晰。后面改為去掉dist層目錄，直接將weapp包內dist下的內容復制到vant目錄，這樣，就少了一層dist目錄，更簡潔）

          

 3、在 App.vue 導入全局樣式：

<style>
    /*每個頁面公共css */
    @import "/wxcomponents/vant/common/index.wxss";
</style>

4、在 pages.json 的globalStyle中增加對應的組件：

"usingComponents": {
      "van-button": "/wxcomponents/vant/button/index"
}

可以選擇在一個頁面的配置文件里面配置，但是只能在這個頁面內使用，你也可以選擇在globalStyle里面配置，是的所有頁面都可以直接使用。 

但是，即便配置在globalStyle中，仍然比較麻煩，需要每個組件都注冊，可以借助easycom:

    "easycom": {
      "autoscan": true,
      "custom": {
        //"^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目錄內的vue文件
        //"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules內的vue文件
        "^van-(.*)":"@/wxcomponents/vant/$1/index.vue"            //匹配van-開頭的
      }
    }

將globalStyle中的usingscomponents注釋掉，可以看到，借助easycom也可以正常運行。

5、index.vue代碼(增加van-button)

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <van-button type='primary'>vant按鈕</van-button>
    </view>
</template>

 結果出現：

這里的錯誤可能各有不同，但多是因字體引起的，因為后面有許多icon，到wxcomponents/icon/index.wxss下，原來的代碼是壓縮的，選格式化代碼，然后保存，重新運行即可。 

6、如果不下載安卓模擬器，而選運行到瀏覽器，會出現如下錯誤：

 在Hbuilderx-運行中下載真機插件，然后重新運行，選第1個，運行成功。

  這說明，已經可以在uni-app項目開發手機APP時，使用vant-ui組件庫了。