1.首先從uniapp官網(wǎng)下載vue3版本+ts的模板
2.安裝vant微信小程序版本
npm i @vant/weapp3.在項(xiàng)目src目錄創(chuàng)建wxcomponents文件夾，在wxcomponents文件夾下創(chuàng)建vant文件夾
4.從node_modules文件夾下的@vant文件夾里面的weapp，weapp下的dist文件夾，將dist文件夾里面的文件復(fù)制到/wxcomponents/vant
5.全局引用? ?在pages.json文件?，??"globalStyle":{}?屬性下加入以下片段，可按需引入具體需要全局引入的組件，引入規(guī)則如下：
注意引入路徑需要改一下，改成正確的路徑，如/wxcomponents/vant
"usingComponents": {
"van-cell-group": "/wxcomponents/vant/cell-group/index",
"van-field": "/wxcomponents/vant/field/index",
//...
}?例子
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents": {
"van-cell-group": "/wxcomponents/vant/cell-group/index",
"van-field": "/wxcomponents/vant/field/index",
"van-button": "/wxcomponents/vant/button/index"
//...
}
}5.單頁(yè)面引用? 在頁(yè)面配置添加組件
"pages": [
//pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"usingComponents": {
"van-cell-group": "/wxcomponents/vant/cell-group/index",
"van-field": "/wxcomponents/vant/field/index",
"van-button": "/wxcomponents/vant/button/index"
//...
}
}
}
],6.開(kāi)發(fā)過(guò)程中應(yīng)參考對(duì)應(yīng)版本的文檔：vant-contrib.gitee.io/vant-weapp?但需要把對(duì)應(yīng)的引用語(yǔ)法改成vue的語(yǔ)法，如：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-635469.html
-
<van-cell-group> <van-field value="{{ value }}" placeholder="請(qǐng)輸入用戶(hù)名" border="{{ false }}" bind:change="onChange" /> </van-cell-group> 改為 <van-cell-group> <van-field :value="value" placeholder="請(qǐng)輸入用戶(hù)名" :border="false" @change="onChange" /> </van-cell-group>
這樣就完成了?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-635469.html
到了這里，關(guān)于uniapp vue3版本+ts使用 vant小程序 組件庫(kù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
