UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法

小灵。 已于 2024-02-04 11:33:37 修改
阅读量2.8w 收藏 54
点赞数 13
文章标签： 前端 微信小程序 uni-app
于 2022-06-08 11:46:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/weixin_57905352/article/details/125180019
版权

1.先在根目录创建wxcomponents文件夹

2.打开 https://github.com/youzan/vant-weapp 下载最新的vant-Weapp

 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉，然后把vant-weapp放到 wxcomponents里面

4.在App.vue引入vant样式

@import '/wxcomponents/vant-weapp/dist/common/index.wxss'

5.然后在pages.json引入（局部引入）

"usingComponents": {
                  "van-button": "/wxcomponents/vant-weapp/dist/button/index"
                }

6. 然后在页面引入button(注意：你在当前页面引入了button其他的页面没有引入，其他页面就用不了，其他页面想用，就得在path相应的路径引入)

 7.这个时候页面会报错，注意：（重新启动项目即可）

 8.然后就可以看到页面的组件出来了

 9.下面是全局引入

 10.分享一些常用的组件你们直接复制到你的usingComponents下面页面就可以直接用了

"usingComponents": {
						  //这里为方便，全局引入了所有组件，也可以在某个page下单独引用某个组件
                "van-action-sheet": "/wxcomponents/vant-weapp/dist/action-sheet/index",
				"van-area": "/wxcomponents/vant-weapp/dist/area/index",
				// "van-badge": "/wxcomponents/vant-weapp/dist/badge/index",
				// "van-badge-group": "/wxcomponents/vant-weapp/dist/badge-group/index",
				"van-button": "/wxcomponents/vant-weapp/dist/button/index",
				"van-card": "/wxcomponents/vant-weapp/dist/card/index",
				"van-cell": "/wxcomponents/vant-weapp/dist/cell/index",
				"van-cell-group": "/wxcomponents/vant-weapp/dist/cell-group/index",
				"van-checkbox": "/wxcomponents/vant-weapp/dist/checkbox/index",
				"van-checkbox-group": "/wxcomponents/vant-weapp/dist/checkbox-group/index",
				"van-col": "/wxcomponents/vant-weapp/dist/col/index",
				"van-dialog": "/wxcomponents/vant-weapp/dist/dialog/index",
				"van-field": "/wxcomponents/vant-weapp/dist/field/index",
				"van-goods-action": "/wxcomponents/vant-weapp/dist/goods-action/index",
				"van-goods-action-icon": "/wxcomponents/vant-weapp/dist/goods-action-icon/index",
				"van-goods-action-button": "/wxcomponents/vant-weapp/dist/goods-action-button/index",
				"van-icon": "/wxcomponents/vant-weapp/dist/icon/index",
				"van-loading": "/wxcomponents/vant-weapp/dist/loading/index",
				"van-nav-bar": "/wxcomponents/vant-weapp/dist/nav-bar/index",
				"van-notice-bar": "/wxcomponents/vant-weapp/dist/notice-bar/index",
				"van-notify": "/wxcomponents/vant-weapp/dist/notify/index",
				"van-panel": "/wxcomponents/vant-weapp/dist/panel/index",
				"van-popup": "/wxcomponents/vant-weapp/dist/popup/index",
				"van-progress": "/wxcomponents/vant-weapp/dist/progress/index",
				"van-radio": "/wxcomponents/vant-weapp/dist/radio/index",
				"van-radio-group": "/wxcomponents/vant-weapp/dist/radio-group/index",
				"van-row": "/wxcomponents/vant-weapp/dist/row/index",
				"van-search": "/wxcomponents/vant-weapp/dist/search/index",
				"van-slider": "/wxcomponents/vant-weapp/dist/slider/index",
				"van-stepper": "/wxcomponents/vant-weapp/dist/stepper/index",
				"van-steps": "/wxcomponents/vant-weapp/dist/steps/index",
				"van-submit-bar": "/wxcomponents/vant-weapp/dist/submit-bar/index",
				"van-swipe-cell": "/wxcomponents/vant-weapp/dist/swipe-cell/index",
				"van-switch": "/wxcomponents/vant-weapp/dist/switch/index",
				// "van-switch-cell": "/wxcomponents/vant-weapp/dist/switch-cell/index",
				"van-tab": "/wxcomponents/vant-weapp/dist/tab/index",
				"van-tabs": "/wxcomponents/vant-weapp/dist/tabs/index",
				"van-tabbar": "/wxcomponents/vant-weapp/dist/tabbar/index",
				"van-tabbar-item": "/wxcomponents/vant-weapp/dist/tabbar-item/index",
				"van-tag": "/wxcomponents/vant-weapp/dist/tag/index",
				"van-toast": "/wxcomponents/vant-weapp/dist/toast/index",
				"van-transition": "/wxcomponents/vant-weapp/dist/transition/index",
				"van-tree-select": "/wxcomponents/vant-weapp/dist/tree-select/index",
				"van-datetime-picker": "/wxcomponents/vant-weapp/dist/datetime-picker/index",
				"van-rate": "/wxcomponents/vant-weapp/dist/rate/index",
				"van-collapse": "/wxcomponents/vant-weapp/dist/collapse/index",
				"van-collapse-item": "/wxcomponents/vant-weapp/dist/collapse-item/index",
				"van-picker": "/wxcomponents/vant-weapp/dist/picker/index"
		                }

以上就是局部全局的方法啦，记得点个赞

小灵。
关注 关注
  • 13
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 66
    评论
vant-weapp-uniapp:vant-weapp的uniapp演示（仅微信小工具）
05-09
VantUI Uniapp 示例 本示例原本是从vant官方发布的微信演示示例转换而来,支持微信小程序（H5不支持！！）。 vant-weapp版本为1.6.7. vant weapp的组件库，都在工程的wxcomponents目录下。pages目录下是各个示例页面。 图片上传服务 提供了图片Nodejs服务 ，代码路径为\src\node-image-upload-server 安装npm包 npm install 运行服务 node app 感谢 本示例参考了依据官网增加了新控件的使用示例。 :fire: 更新日志 1.2.2(2021-01-30) 升级版本至1.6.7，增加新功能示例（自定义属性示例），优化原有功能。 1.1.0(2020-04-30) 升级版本至1.2.1，增加新功能示例，优化原有功能。 1.0.0(2020-02-19) 支持H5模式编译。
uni-app引入vant Weapp
YNEWA的博客
05-11 3796
前言 vant Weapp 是有赞专为微信小程序适配的一套UI组件详情查看官网 此组件只兼容微信小程序和app，有跨端需求的请做好适配 此文是关于uni-app在HBuliderX中如何引入vant Weapp 工具 HBuliderX 微信开发者工具 方法 在小程序中，是通过控件调用的方式调用vant，所以只需要把所需的Vant Weapp控件导入我们的项目中 1、下载Vant Weapp源码 这里通过git方式下载最新的Vant Weapp得源码 git clone https..
微信小程序的Vant Weapp组件库
2301_76669854的博客
05-12 1184
是一套开源的微信小程序UI组件库。提供了一整套UI基础组件和业务组件，能够快速地搭配出一套风格统一的页面。vant weapp组件库的详细使用：
小程序引入 Vant Weapp 极简教程
weixin_45940369的博客
05-04 830
小程序引入 Vant Weapp 极简教程
小程序引入vant-Weapp保姆级教程及安装过程的问题解决
qq_57676486的博客
09-17 5909
最后再教大家一个小技巧，看图片，对就是头像旁边的那个小手点一下作者：Axjy链接：https://juejin.cn/post/7011742207073845278来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
微信小程序安装和使用 Vant Weapp 组件库
m0_63622279的博客
07-15 6557
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
小程序开发超好用的UI组件——Vant Weapp
yueyue763184的博客
01-20 4280
Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是MIT 开源许可协议① 通过 npm 安装② 构建 npm 包③ 修改 app.json若有需要，可在 app.wxss 中引入内置样式。
微信小程序安装VantWeapp
weixin_53805188的博客
01-05 623
在安装以前必须先检查是否有node,在终端输入node -v即可查看，没有的话就先安装node我按照官方文档（）安装的时候，到最后构建npm发现提示/xxxxxxxxx/mytest/node_modules/@babel/runtime/index.js: 未找到npm包入口文件后来发现是缺少package.json文件，于是修改 project.config.json文件复原以后在终端执行如下命令，卸载安装的VantWeapp。
如何在uni-app中使用vant组件？
xfWgaoqiang的博客
05-31 3663
在我们刚才新建的wxcomponents 目录下新建一个 @vant 的文件夹，建立目录方法就和步骤三一样，只不过这一次我们要在 wxcomponents 目录下建立 子目录 @vant。再多提一嘴，vant组件是配合原生小程序使用的，所以有些地方，比如data数据渲染，我们不能直接照抄，一般用vue的思路就可以解决啦。那我们这样创建文件夹，和它嵌套的路径一样，是不是后面使用复制vant 提供的路径就OK了？填写项目名称，选择模板，vue技术栈，…最后说明一下前面文件夹的命名方式的由来。
【uni-app导入vant】
qq_45772997的博客
04-11 1万+
uni-app导入vant方法
微信小程序引入vant-weapp
01-03
2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x ...
a uniapp demo for vant-weapp示例.zip
02-04
uniapp版的vant微信小程序源码
taro3-vant-sample:Taro3 中使用 vant-weapp 的示例
05-26
taro3-vant-sampleTaro3 中使用 vant-weapp 的示例 React 版本需要关注的点引用 vant 组件引用 vant 组件需要在页面的 config 文件中进行配置，如export default { navigationBarTitleText: '首页', usingComponents...
微信小程序npm引入vant-weapp的踩坑记录
12-01
微信小程序项目使用npm安装vant-weapp的正确步骤  使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装...
Uniapp引入vant-weapp
Tfishupupup的博客
08-08 4611
vant引入uniapp，引入过程及问题记录
微信小程序中使用vant组件库（超详细）
热门推荐
阿浩的博客
01-17 1万+
Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。微信小程序版本的Vant组件库是Vant Weapp，其官方文档是我们废话不多说，直接进入主题，在微信小程序中使用Vant Weapp。
WX小程序-VantWeapp组件库样式修改
weixin_49352307的博客
04-08 491
根据官方文档查找组件样式类，对其样式进行修改。比如使用按钮组件在app.scss中修改样式。
微信小程序-----基础加强(二)
最新发布
2201_76041915的博客
05-17 1034
自定义组件Vant 组件库MobX 数据共享组件样式隔离组件数据监听器组件的 behaviorsVant 样式覆盖。
uniapp引入vant-weapp
07-28
在uniapp中引入vant-weapp组件库可以通过以下步骤进行配置。首先，在需要使用组件的页面的style中设置usingComponents引入vant-weapp组件的路径。例如，在pages数组中的某个页面的style中添加以下代码： ``` "usingComponents": { "van-button": "/wxcomponents/vant-weapp/button/index", "van-sidebar": "/wxcomponents/vant-weapp/sidebar/index", "van-sidebar-item": "/wxcomponents/vant-weapp/sidebar-item/index", "van-icon": "/wxcomponents/vant-weapp/icon/index" } ``` 其中，"van-button"、"van-sidebar"、"van-sidebar-item"和"van-icon"是你想要引入的vant-weapp组件的名称，后面的路径是组件的相对路径。你可以根据自己的需要引入不同的组件。 另外，还需要在全局配置文件中的usingComponents中添加vant-weapp组件的路径。例如，在配置文件中的pages数组中的某个页面的style中添加以下代码： ``` "usingComponents": { "van-button": "/wxcomponents/vant-weapp/button/index" } ``` 这样就完成了在uniapp中引入vant-weapp组件库的配置。你可以根据需要在不同的页面中引入不同的vant-weapp组件。 #### 引用[.reference_title] - *1* *3* [uni-app引入vant Weapp](https://blog.csdn.net/YNEWA/article/details/106056610)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp引入Vant Weapp](https://blog.csdn.net/m0_48259951/article/details/129733632)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法 28393
  • github copilot插件安装（vscode） 11238
  • vue上传视频获取视频第一帧 3501
  • vue(h5)打包apk 2985
  • 截取字符串自身的前后（包括自身） 2269

分类专栏

  • vant 3篇
  • 打包 1篇
  • 截取字符串 1篇
  • Element 3篇
  • ant-design 1篇

最新评论

  • UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法

    恬星: 它不支持那种大括号的，把双大括号去掉，然后属性前面加：这个冒号，下面在return里面写之前大括号的属性，变成：options=options1，这样下面return里面写，option1=[{……数据}]，就可以了，包括一些点击按钮，把bind：click变为@click就好了

  • UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法

    fanli_fan: van-button和一些其他比较简单的组件使用没问题，但是van-dropdown-item这种传option数组的时候用双大括号options={{ option1 }}"时hbuilderx模板语法检测不通过咋办，编译不出来就更没法运行到小程序了，直接shutdown了，我改成:options="option1"这样符合vue语法组件又渲染不出数据，大佬知道怎么改吗，救救

  • UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法

    她没给糖糖~: 全局导入可以正常使用，但是不能局部导入

  • UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法

    _Dorr_: 请问多端的话用哪个ui库方便点呢

  • UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法

    皓 月: 我擦 我还是有错啊 Can't find stylesheet to import. @import '/wxcomponents/vant-weapp/dist/common/index.wxss';

您愿意向朋友推荐“博客详情页”吗？

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • vue(h5)打包apk
  • 截取字符串自身的前后（包括自身）
  • vue上传视频获取视频第一帧
2022年11篇

目录

目录

评论 66
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值

哆哆女性网向命运挑战婵字在起名中的禁忌宝宝免费起名网定周易宝宝起名唐氏起名大全男孩取名猪年起名女孩大全冯姓男孩起名满分名字两个人的公司起什么名字怎样起公司名字鼠年出生的人起名仙境传说奥德赛联机动漫更新微不足道的拼音公司起名上口好姓名起名网善如意起名专家沙场起名大全2021年出生的牛宝宝起名citizenautomatic暴力摩托2002起名大全天气大宋好屠夫绿色生态的商标起名起名字改取名大全王氏婴儿起名大全男孩观海听涛bbs梅兰竹菊 起名字reflector袁姓女孩子起名字大全世上无难事只要肯登攀企业邮箱名称怎么起比较正式淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人？单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”

哆哆女性网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化