使用第三方ui組件的問(wèn)題

以vant-weapp 為例子

直接通過(guò) git 下載 Vant Weapp 源代碼

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

下載完了之后將dist 目錄給復(fù)制出來(lái)，

進(jìn)入你的mpvue項(xiàng)目目錄，執(zhí)行npm run dev 或者 npm run build, 之后目錄下會(huì)多出一個(gè)dist文件夾，將剛剛下載的vant-weapp目錄中的dist目錄改下名字改成你自己喜歡的名字。比如我直接改成vant-weapp，然后將vant-weapp文件夾復(fù)制到mpvue項(xiàng)目目錄下的 dist 目錄里面。

然后比如我們的index頁(yè)面中想使用vant-wapp 中的某個(gè)組件:

我們找到我們定義的頁(yè)面 /pages/index/main.json文件

添加

"usingComponents": {
    "van-button": "./../../vant-weapp/button/index",
    "van-dialog": "./../../vant-weapp/dialog/index",
    "van-notice-bar": "./../../vant-weapp/notice-bar/index",
    "van-action-sheet": "./../../vant-weapp/action-sheet/index",
    "van-search": "./../../vant-weapp/search/index"
  }

如

{
  "backgroundTextStyle": "dark",
  "navigationBarTitleText": "頁(yè)面標(biāo)題",
  "usingComponents": {
    "van-button": "./../../vant-weapp/button/index",
    "van-dialog": "./../../vant-weapp/dialog/index",
    "van-notice-bar": "./../../vant-weapp/notice-bar/index",
    "van-action-sheet": "./../../vant-weapp/action-sheet/index",
    "van-search": "./../../vant-weapp/search/index"
  }
}

需要注意的是 ./../../vant-weapp/button/index 這個(gè)路徑是mpvue項(xiàng)目下的dist中的相對(duì)路徑。

如有不明白的地方可聯(lián)系 qq:836717428