uniapp使用Vant ui

uniapp项目中如何使用Vant ui

uniapp常用框架有很多，例如uview，colorUI，当然还有dcloud团队打造的插件库等等。一般手机App开发使用这些框架或者组件库已经足够了。但是vue开发移动端web时，一个比较好用的框架就是Vant （https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home）
uniapp基于vue框架但是与vue有许多不同，例如一些标签view 、text这些特有的标签。
那么uniapp是否可以直接使用vant呢，答案是可以的。网上百度uniapp使用vant时，很多答案都是在根路径下创建文件夹，而且都是基于小程序环境的。其实uniapp可以直接使用的。下面一起看一下吧。

新建uniapp项目

创建完成后，加载vant依赖，这里我使用的是vue2，所以加载的事vant2。如果不会在uniapp项目中添加node依赖，自行百度一下。

npm i vant@latest-v2 -S

此时的项目结构是这样的
可以看到模块已经加载进去了，接下来就是使用vant了。

在main.js中引入vant和使用vant。注意第6行和第7行代码。

import Vant from 'vant';
Vue.use(Vant);

到这里已经引入成功了，在vue框架中可以直接在这里引入样式。

但是在uniapp中这样是不可以的，本人亲测，勿掉坑了。正确做法是在app.vue文件中导入。

要在这里哦，导入就成功了。此时启动项目，在浏览器中运行。

可以看到，启动是没有问的了。接下来就可以直接使用vant组件了
在index.vue中直接导入了vant组件中的按钮组件。
可以看到vant组件中的按钮已经显示出来了，样式也是可以的。到这里就结束了，可以随意在里面使用你想要的组件啦。
vant组件的样式还是可以的，但是针对于uniapp，个人觉得还是使用针对于uniapp开发的框架会好用一些。