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文件中导入。
要在这里哦，导入就成功了。此时启动项目，在浏览器中运行。
文章来源：https://www.toymoban.com/news/detail-465379.html
可以看到，启动是没有问的了。接下来就可以直接使用vant组件了
在index.vue中直接导入了vant组件中的按钮组件。
可以看到vant组件中的按钮已经显示出来了，样式也是可以的。到这里就结束了，可以随意在里面使用你想要的组件啦。
vant组件的样式还是可以的，但是针对于uniapp，个人觉得还是使用针对于uniapp开发的框架会好用一些。文章来源地址https://www.toymoban.com/news/detail-465379.html
到了这里，关于uniapp使用Vant ui的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
