uniapp progress没出来 uniappvant

前言：公司项目需要做一个表单类的项目，要分别在小程序平台，h5平台，以及公司内部开发的App中适用同一套代码，所以选用多平台使用的框架，uniapp，但是uniapp采用的ui是weui，不太适合我们公司的产品，相比之下，vant的ui是比较合适的。所以需要在uniapp项目中引入vant。

        uniapp中引入vant，在网上搜到了很多文章，且文章中也有详情步骤如何引入，也会有很多报错的踩坑指导，这边浅谈下我这边的实战经验。

        

首先，我们看vant官网，他并没有实现h5和微信小程序版本的统一，也就是说，采用vant的话，要做好写两套dom代码的准备。

小程序版本的引入vant weapp步骤如下：

1. 在src目录下新建wxcomponents目录，目录层级如下：
2. 去vantweapp 官网去下载源码资源包，地址：https://gitee.com/vant-contrib/vant-weapp
   （复制其中dist文件夹,到wxcomponents文件夹）这边要注意你的vue版本，去选择对应的vant版本：官网也有相应的提示：
3. 在page.json文件中配置单页面引入or全局引入vant插件，这边有个问题，很多同学都有遇到以下报错，然后网上给到很多方案，说要去格式化icon下面的index.wxss

        博主一开始也是尝试着去修改，但是发现每次run sever的时候，修改都会被revert，所以博主尝试在配置的page.json的时候加了个平台判断。

 

 虽然usingComponents是在小程序的配置中生效的，但是在运行h5项目的时候，貌似也会把这些引入拿来编译，vant weapp本来就是属于小程序平台的框架，在h5运行报错是可以理解的，改成这样判断之后，h5平台运行不会报错了。

H5平台的引入步骤：

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

2. 这边同样的，做了平台判断，平台如果不判断，在小程序中也会运行报错



3.   

 这样就不用额外做其他的修改以及兼容，这是我的项目实战经验，希望对大家有用