微信小程式集成vant，大概的過程先通過npm 安裝vant包->微信小程式設置npm環境變數->將npm中的vant包導成miniprogram_npm 開發環境 macOS ，微信小程式模版【支持騰訊雲】 安裝vant包 cd miniprogram # 通過 npm 安裝 npm i @van ...
微信小程式集成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>
- 完整的項目結構
