uniapp vue3版本+ts使用 vant小程序 组件库

首先从uniapp官网下载vue3版本+ts的模板

安装vant微信小程序版本

npm i @vant/weapp

在项目class="lazy" data-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的语法，如：

1.     改为    

这样就完成了 

来源地址：https://blog.csdn.net/qq_43319351/article/details/131351792