mpvue 使用第三方ui庫

使用第三方ui組件的問題

以vant-weapp 爲例子

直接通過 git 下載 Vant Weapp 源代碼

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

下載完了之後將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