基于uniapp开发的vue3项目引入vant框架

目前基于uniapp开发的项目，大多数都是vue2的语法，主流的UI框架主要有uview等，但是uview目前对vue3的支持性并不好。如果我想用vue3的语法去开发uniapp的项目，那么我该引入什么UI框架呢？我首先想到的是vant，但是vant目前只有微信小程序版本和vue3版本，可是熟悉uniapp开发的朋友应该知道，uniapp组件标签靠近微信小程序规范，详见uni-app 组件规范，页面文件遵循 vue单文件组件规范，那么如果想在项目中引入vant去使用，只有同时综合微信小程序版本和vue3版本这2个网站的代码去实现。究竟如何综合，下面我会具体介绍。

首先介绍如何在项目中引入vant

1.在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级

2.前往Github下载压缩文件，解压后将该项目的dist文件夹替换步骤1的dist文件夹

3.App.vue的style中引入样式

@import "/wxcomponents/vant/dist/common/index.wxss";

这里插一句，因为引入vant后，有些地方需要使用图标，但是vant中引入的图标都是字体图标，所以我在这里直接引入了字体图标，大家可以参考下图

4.使用:在pages.json中引入组件，为了方便我直接在全局的globalStyle中引入所有的组件，也可以在单个文件中引入该页面需要使用的组件

上面准备工作结束，下面我来介绍如何使用vant，举3个例子吧

1.实现下图所示内容

参考van-cell的示例如下

综合示例，写出如下代码：

2.实现下图所示内容

参考vant微信小程序版本的van-field的示例如下

参考vant的vue3版本的van-field的示例如下

在uniapp中这2种写法都不能直接拿来使用，包括双向绑定也不能使用，会报错，如果要实现双向数据绑定，需要借助change事件

注意：vant微信小程序版本里面是没有form表单的，但是vue3版本里面又是有van-form的，所以在uniapp项目中也是不能使用van-form的

3.实现下图所示内容

参考vant微信小程序版本的van-search的示例如下

参考vant的vue3版本的van-search的示例如下

综合示例，写出如下代码：