首先从uniapp官网下载vue3版本+ts的模板
安装vant微信小程序版本
npm i @vant/weapp
在项目src目录创建wxcomponents文件夹,在wxcomponents文件夹下创建vant文件夹
从node_modules文件夹下的@vant文件夹里面的weapp,weapp下的dist文件夹,将dist文件夹里面的文件复制到/wxcomponents/vant
全局引用 在pages.json
文件 , "globalStyle":{}
属性下加入以下片段,可按需引入具体需要全局引入的组件,引入规则如下:
注意引入路径需要改一下,改成正确的路径,如/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" //... } }
单页面引用 在页面配置添加组件
"pages": [ //pages数组中第一项表示应用启动页,参考: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" //... } } } ],
开发过程中应参考对应版本的文档:vant-contrib.gitee.io/vant-weapp 但需要把对应的引用语法改成vue的语法,如:
这样就完成了
来源地址:https://blog.csdn.net/qq_43319351/article/details/131351792