???微信小程式集成vant，大概的程序先通過npm 安裝vant包->微信小程式設定npm環境變數->將npm中的vant包導成miniprogram_npm
???開發環境 macOS ，微信小程式模版【支持騰訊云】
- 安裝vant包
cd miniprogram
# 通過 npm 安裝
npm i @vant/weapp -S --production
-
配置微信小程式的樣式，去除miniprogram/app.json中"style":"v2"
-
配置專案config中的packageJsonPath 和miniprogramNpmDistDir
packageJsonPath -> npm 的package.json檔案的位置
miniprogramNpmDistDir -> 生成miniprogramNpm的檔案目錄位置
//下面供參考，開發中按照實際的位置填寫
"packNpmRelationList": [
{
"packageJsonPath": "./miniprogram/package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
4 構建 npm 包
???打開微信開發者工具，點擊 工具 -> 構建 npm，并勾選 使用 npm 模塊 選項，構建完成后，即可引入組件，
5 測驗vant包
???在index界面中添加一個button
// app.json 配置button包
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
// 在index.wxml中添加Button
<van-button type="primary">按鈕</van-button>
- 完整的專案結構
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/465115.html
標籤：其他