如何使用第三方ui庫vant-weapp

1==》建立檔案夾demo

2==》 在小程式 中打開 注意  要先在小程式中打開
如果要想在小程式的開發工具中打開某一個 檔案夾
要麼是空檔案夾 要麼有一個 project.config.json的配置

2==》 cmd ==> npm init -y  生成包描述檔案  package.json

按照官網提示
3==》npm i @vant/weapp -S --production  注意版本

4==》步驟二 建構 npm 包
打開微信開發者工具，點選 工具 -> 建構 npm，并勾選 使用 npm 子產品 選項，建構完成後，即可引入元件

5==》引入元件
以 Button 元件為例，隻需要在app.json 中添加如下
"usingComponents": {
  "van-button": "@vant/weapp/button"
}

6==>在某個頁面就可以使用了按鈕了
<van-button plain type="primary">樸素按鈕</van-button>
<van-button plain type="info">樸素按鈕</van-button>      

使用第三方庫的注意點###

在使用其他元件時，要引入與之對應的元件
注意元件是否正确
"usingComponents": {
  "van-cell": "path/to/@vant/weapp/dist/cell/index",
  "van-cell-group": "path/to/@vant/weapp/dist/cell-group/index"
}
上面這種  引入要不得

将path/to去除  dist也要去除。
正确應該為
 "van-cell": "@vant/weapp/cell/index",
 "van-cell-group": "@vant/weapp/cell-group/index"

 否則找不到路徑  會報錯      

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。

作者：​​晚來南風晚相識​​​

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接