HBuilder 安装 vant

最新推荐文章于 2024-01-30 02:28:08 发布

老徐..

最新推荐文章于 2024-01-30 02:28:08 发布

阅读量2.3k

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/YZG_888888/article/details/126707488

版权

在用HBuilder 写小程序项目的时候用到组件库一开始使用的是 uni-app 官网自带的组件库

但发现功能不全好多用到的组件功能没有于是想用vant 组件库

开工！

一我使用的HBuilder 内部下载的插件在进行配置俩种方法

第一种 https://ext.dcloud.net.cn/plugin?id=302 从浏览器进入到下面的页面！

点击使用HBuider 导入插件

点击打开HBuilder 下载

第二种从HBuilder框架内部打开直接搜索 Vantui Weapp For Uni-app 俩种方法的过程是一样的！

二下载完成之后 HBuilder 会自动多一个文件下图！

下载的文件里有一个名为 wxcomponents 的文件移动自己的文件下不懂的可以参考下图！

配置之后 HBuilder 还需要进行配置还有就是要是使用vant组件库我只知道使用按需引入的方式

三首先在app.vue 中引入样式

@import '/wxcomponents/vant/common/index.wxss';

四我感觉我的已经是傻瓜式教程了在pages.json 文件下引入！参考图片

         "usingComponents": {
   "van-button": "/wxcomponents/vant/button/index",
   "van-tab": "/wxcomponents/vant/tab/index",
   "van-tabs": "/wxcomponents/vant/tabs/index",
   "van-cell-group": "/wxcomponents/vant/cell-group/index",
   "van-cell": "/wxcomponents/vant/cell/index",
   "van-image": "/wxcomponents/vant/image/index",
   "van-icon": "/wxcomponents/vant/icon/index",
   "van-nav-bar": "/wxcomponents/vant/nav-bar/index",
   "van-tag": "/wxcomponents/vant/tag/index",
   "van-divider": "/wxcomponents/vant/divider/index",
   "van-field": "/wxcomponents/vant/field/index",
   "van-dialog": "/wxcomponents/vant/dialog/index",
   "van-dropdown-menu": "/wxcomponents/vant/dropdown-menu/index",
   "van-dropdown-item": "/wxcomponents/vant/dropdown-item/index",
   "van-sticky": "/wxcomponents/vant/sticky/index",
   "van-radio": "/wxcomponents/vant/radio/index",
   "van-radio-group": "/wxcomponents/vant/radio-group/index",
   "van-search": "/wxcomponents/vant/search/index",
   "van-uploader": "/wxcomponents/vant/uploader/index",
   "van-calendar": "/wxcomponents/vant/calendar/index",
   "van-action-sheet":"/wxcomponents/vant/action-sheet/index"
   }