Vant Weapp地址：https://youzan.github.io/vant-weapp/#/intro
一、微信小程序--引入第三方框架 Vant (配合vsCode)
引用步驟原文鏈接：https://blog.csdn.net/doinb_6/article/details/107021939
1.1冯丙、根目錄新建文件夾miniprogram (為引入vant 做準(zhǔn)備)
image.png
1.2抓韩、右鍵miniprogram文件夾昭殉，選在在終端打開
輸入命令：npm init（記得以管理員身份運(yùn)行開發(fā)工具）,然后一直回車频丘，直至在miniprogram文件夾下谣拣，生成package.json文件杠袱。
image.png
1.3辐怕、安裝依賴
通過(guò)npm安裝,執(zhí)行以下命令
1：npm install --production
2: npm i @vant/weapp -S --production
image.png
1.4、構(gòu)建 NPM 包
打開微信開發(fā)者工具壤躲，點(diǎn)擊 工具 -> 構(gòu)建 npm城菊，并點(diǎn)擊詳情备燃，勾選 使用 npm 模塊 選項(xiàng)碉克，構(gòu)建完成后，即可引入組件
image.png
1.5并齐、將 app.json 中的
"style": "v2" 去除漏麦，小程序的[新版基礎(chǔ)組件https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style]強(qiáng)行加上了許多樣式客税，難以去除，不關(guān)閉將造成部分組件樣式混亂撕贞。
1.6更耻、成功
——————————————————————————————————————————————
二、常用設(shè)置
1捏膨、常用的樣式放在app.json中 ,例如：button
"usingComponents": {
"van-button": "./miniprogram/miniprogram_npm/@vant/weapp/button"
}
2秧均、頁(yè)面單獨(dú)引用組件
2.1、Html
<van-button type="danger" bind:click="showPopup">危險(xiǎn)按鈕</van-button>
<van-popup show="{{ show }}" bind:close="onClose">內(nèi)容</van-popup>
2.2号涯、Json
"usingComponents": {
"van-popup": "../../miniprogram/miniprogram_npm/@vant/weapp/popup"
}
2.3目胡、js 備注：如果不顯示，可能要單獨(dú)再引用該組件的js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
show: false,
},
onLoad: function () {
},
showPopup() {
this.setData({ show: true });
},
onClose() {
this.setData({ show: false });
},
})
