技術標籤：vue.js

Hbuilder uni-app專案使用Vant Weapp

1.在專案根目錄下新建 wxcomponents 目錄
，此目錄應該與components 目錄同級。 直接通過 git 下載 vant-weapp
最新原始碼，並將dist目錄拷貝到新建的wxcomponents目錄下，並重命名dist為vant-weapp。

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

2修改檔名如下

3.page.json中引入

"pages": [{ 
	"path":"goods_detail/goods_detail"
 
, 
	"style": { "navigationBarTitleText": "",
   "enablePullDownRefresh": false, 
   "usingComponents": { 
   "van-goods-action":
"/wxcomponents/vant-weapp/goods-action/index", "van-goods-action-icon":
"/wxcomponents/vant-weapp/goods-action-icon/index"
 
, "van-goods-action-button":
"/wxcomponents/vant-weapp/goods-action-button/index", "van-submit-bar":
"/wxcomponents/vant-weapp/submit-bar/index" }
} }] 

4使用vant-weapp

<van-goods-action>
    <van-goods-action-icon
        icon="cart-o"
        text=
 
"購物車"
        info="5"
        @click="onClickIcon('購物車')"
    />
    <van-goods-action-icon
        icon="shop-o"
        text="店鋪"
        @click="onClickIcon('店鋪')"
    />
    <van-goods-action-button
        text="加入購物車"
        type="warning"
        @click="onClickButton"
    />
    <van-goods-action-button text="立即購買" @click="onClickButton" />
</van-goods-action>

5效果