使用第三方ui元件的問題

以vant-weapp 為例子

直接通過 git 下載 Vant Weapp 原始碼

下載完了之後將dist 目錄給複製出來，

進入你的mpvue專案目錄，執行npm run dev 或者 npm run build, 之後目錄下會多出一個dist資料夾，將剛剛下載的vant-weapp目錄中的dist目錄改下名字改成你自己喜歡的名字。比如我直接改成vant-weapp，然後將vant-weapp資料夾複製到mpvue專案目錄下的 dist 目錄裡面。

然後比如我們的index頁面中想使用vant-wapp 中的某個元件:

我們找到我們定義的頁面 /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": "頁面標題",
  "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 這個路徑是mpvue專案下的dist中的相對路徑。

如有不明白的地方可聯絡 qq:836717428