1. Vant Weapp 介紹
Vant 是一個(gè)輕量、可靠的移動(dòng)端組件庫，于 2017 年開源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區(qū)團(tuán)隊(duì)維護(hù) React 版本和支付寶小程序版本。
2. Vant Weapp 的 安裝
在小程序項(xiàng)目上安裝Vant Weapp,（你的電腦應(yīng)該有npm環(huán)境才行）。
win + R 輸入 npm -version 查看一下
如果沒有安裝node.js的話，可以參考一下這篇博客 NodeJs的安裝
2.1. 通過npm安裝
首先在項(xiàng)目的資源管理器中右鍵打開黑窗口，然后輸入命令"npm init -y"
接著就可以看著官方文檔來使用npm為當(dāng)前項(xiàng)目安裝Vant Weapp 了
npm i @vant/weapp@版本號(hào) -S --production
2.2. 構(gòu)建npm
選擇導(dǎo)航欄中的工具，然后選擇構(gòu)建npm即可。
構(gòu)建完npm之后，會(huì)多出一個(gè)文件夾 “minprogram_npm”
2.3. 修改 app.json
將 app.json 中的 “style”: “v2” 去除，小程序的新版基礎(chǔ)組件強(qiáng)行加上了許多樣式，難以覆蓋，不關(guān)閉將造成部分組件樣式混亂。
2.4. 修改 project.congfig.json
開發(fā)者工具創(chuàng)建的項(xiàng)目，miniprogramRoot 默認(rèn)為 miniprogram，package.json 在其外部，npm 構(gòu)建無法正常工作。
需要手動(dòng)在 project.config.json 內(nèi)添加如下配置，使開發(fā)者工具可以正確索引到 npm 依賴的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
2.5. 測試一下，使用Vant Weapp提供的組件
我們?cè)赼pp.json全局配置文件中，引入相關(guān)組件。然后在頁面中使用查看一下效果。文章來源：http://www.zghlxwxcb.cn/news/detail-568651.html
- 引入組件(app.json)
"usingComponents":{
"van-button": "@vant/weapp/button/index"
}
- 使用并查看效果
在home.wxml中使用名為 “van-button” 的組件
<van-button type="primary">ok</van-button>
文章來源地址http://www.zghlxwxcb.cn/news/detail-568651.html
到了這里，關(guān)于微信小程序安裝和使用 Vant Weapp 組件庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
