使用Vant 組件 [“usingcomponents”][“van-button”]: “@vant/weapp/button/index” 未找到：
vm235:1 miniprogram/app.json: ["usingcomponents"]["van-button"]: "@vant/weapp/button/index" 未找到
在開發微信小程式時，需要引入好看的UI庫，這時就需要用到Vant UI，本人分享遇到的一些問題
解決辦法：
1、需要先在miniprogram檔案里初始化package.json
npm init -y
2、在miniprogram檔案里下載npm資源包
npm i @vant/weapp -S --production
3、接下來就需要在微信開發者工具里面進行配置
點擊詳情 使用npm模塊
點擊工具 構建npm
4、配置完成就可以使用了，后面就是使用程序
參考官網地址： https://vant-contrib.gitee.io/vant-weapp/#/quickstart#qi-ta
1、修改 app.json
將 app.json 中的 "style": "v2" 去除，小程式的新版基礎組件強行加上了許多樣式，難以覆寫，不關閉將造成部分組件樣式混亂，
2、修改 project.config.json
開發者工具創建的專案，miniprogramRoot 默認為 miniprogram，package.json 在其外部，npm 構建無法正常作業，
需要手動在 project.config.json 內添加如下配置，使開發者工具可以正確索引到 npm 依賴的位置，
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
3、引入組件
以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應的路徑即可，
// 通過 npm 安裝
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
4、使用組件
引入組件后，可以在 wxml 中直接使用組件
<van-button type="primary">按鈕</van-button>
5、使用成功
以上就是結果問題的全部流程，歡迎留言討論，一起學習，一起進步！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/248148.html
標籤：區塊鏈
下一篇：go之gRPC入門