uni-app中vant-Weapp组件库的使用

news2024/9/22 7:39:24

先创建一个基础的uni-app目录

从github下载vant包,zip格式的

https://github.com/youzan/vant-weapp/releases

项目根目录下创建wxcomponents文件夹

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

App.vue中引入vant样式

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

在pages.json文件下的 "globalStyle" 下的 "usingComponents" 中按需引入

运行会报错(直接重新运行项目即可)

一些常用的组件我们可以直接复制到usingComponents
"usingComponents": {

"van-action-sheet": "/wxcomponents/vant-weapp/dist/action-sheet/index",
"van-area": "/wxcomponents/vant-weapp/dist/area/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-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"
}

这样我们就可以使用了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/196427.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在CentOS-6.9配置apache服务(2)---虚拟目录配置

文章目录一 需求二 系统环境三 基于Alias普通别名3.1 配置个人主页3.2 编写虚拟目录配置文件3.3 测试四 基于ScriptAlias脚本别名4.1 编写主配置文件4.2 创建测试主页4.3 测试一 需求 基于用户个人主页的身份验证,在浏览器输入 10.0.0.100/~a 可以得到用户a的个人网…

Linux:CPU频率调节模式以及降频方法简介

概述 cpufreq的核心功能,是通过调整CPU的电压和频率,来兼顾系统的性能和功耗。在不需要高性能时,降低电压和频率,以降低功耗;在需要高性能时,提高电压和频率,以提高性能。 cpufreq 是一个动态调…

拉伯证券|机构看好中国经济 人民币资产吸引力持续增强

2023年人民币汇率以及A股强势开局。1月以来人民币对美元中心价已累计增值超3%,接连3个月增值。到1月末,北向资金累计净买入额达1311.46亿元,刷新了沪深股通单月净买入新高。 在“真金白银”加仓布局人民币财物的一起,外资组织也纷…

CSS实现9宫格布局的4种方法:flex、float、grid、table布局

一、实现效果及html代码 1、实现效果 2、html代码 <body><div class"container"><div style"background-color: red">1</div><div style"background-color: blue">2</div><div style"background-…

十二、树结构的实际应用—赫夫曼树

1、赫夫曼树 1.1 基本介绍 给定 n 个权值作为 n 个叶子节点&#xff0c;构造一棵二叉树&#xff0c;若该树的带权路径长度&#xff08;wpl&#xff09;达到最小&#xff0c;称这样的二叉树为最优二叉树&#xff0c;也称哈夫曼树&#xff08;Huffman Tree&#xff09;&#xf…

Java工厂模式

定义&#xff1a;将创建对象的权利交给工厂类实现&#xff0c;解耦对象使用者和对象创建过程。 工厂模式有三种&#xff1a; 1、简单工厂模式 2、工厂方法模式 3、抽象工厂模式 使用工厂模式作用&#xff1a; 1、客户类和对象之间的耦合关系转移到了工厂方法和对象之间 …

pl/sql篇之變量的定義

簡述本篇文章主要介紹pl/sql的變量的簡單數據類型&#xff0c;複雜數據類型定義和調用方法&#xff0c;希望能對讀者有些許作用數據類型介紹變量的定義和調用在pl/sql中&#xff0c;定義的變量在聲明之後&#xff0c;可以直接在後續的sql調用&#xff0c;使用上非常方便簡單數據…

图解 MySQL MVCC 实现原理

文章目录MVCC 产生背景InnoDB 引擎表的隐藏列Undo 回滚版本链一致性视图MVCC 实现原理举例说明 MVCC 实现过程MVCC 产生背景 最早的数据库系统,只有读读之间可以并发,读写,写读,写写之间都要阻塞。而 MVCC (Muti Version Concurrency Control) , 是一种多版本并发控制机制。在…

Pandas+Pyecharts | 全国吃穿住行消费排行榜,最‘抠门’的地区居然是北京!!!

文章目录&#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 计算各项占比&#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 全国各地区人均收入、消费支出排行榜3.2 全国各地区人均可支配收入地图3.3 全国…

HCIA之ARP协议

ARP协议1、原理2、ARP工作过程3、ARP分类1、原理 根据已知的地址来获取与其对应的另一种地址 2、ARP工作过程 目标MAC全F&#xff0c;对于交换机&#xff0c;会洪泛&#xff1b;对于所有主机&#xff0c;都会以为是找自己的。 发送者PC1&#xff1a;发出广播帧&#xff0c;源I…

大型CRM客户管理系统带小程序、H5 java源码(spring boot 后台 前端vue)

功能介绍 1、系统管理&#xff1a;员工管理、角色管理、菜单管理、部门管理、岗位管理、字典管理、参数设置、日志管理 2、系统监控&#xff1a;在线用户、定时任务、数据监控、服务监控 3、系统工具&#xff1a;表单构建、代码生成、系统接口 4、平台配置&#xff1a;配置…

python - 密码加密与解密

Python之密码加密与解密 - 对称算法一、对称加密1.1 安装第三方库 - PyCrypto1.2 加密实现二、非对称加密三、摘要算法3.1 md5加密3.2 sha1加密3.3 sha256加密3.4 sha384加密3.5 sha512加密3.6 “加盐”加密由于计算机软件的非法复制&#xff0c;通信的泄密、数据安全受到威胁。…

车载音频系统方案的组合设计

现代数学可以分为两大类:一类是研究连续对象的,如分析学、方程等,另一类就是研究离散对象的数学。 有人认为广义的组合数学就是离散数学,也有人认为离散数学是狭义的组合数学和图论、代数结构、数理逻辑等的总称。但这只是不同学者在叫法上的区别,随着计算机科学的日益发…

实现支付宝网站登录

不推荐使用沙箱环境&#xff0c;因为问题太多&#xff0c;如果使用沙箱环境请注意一下几点 alipay.user.info.auth&#xff08;用户登录授权接口&#xff09;的 return_url 必传&#xff0c;建议检查是否设置 return_url。return_url 与应用中的授权回调地址一致。再换沙箱环境…

图解最常用的 10 个机器学习算法

在机器学习领域&#xff0c;有种说法叫做“世上没有免费的午餐”&#xff0c;简而言之&#xff0c;它是指没有任何一种算法能在每个问题上都能有最好的效果&#xff0c;这个理论在监督学习方面体现得尤为重要。 举个例子来说&#xff0c;你不能说神经网络永远比决策树好&#…

5.4 单管放大电路的频率响应

一、单管共射放大电路的频率响应 考虑到耦合电容和结电容的影响&#xff0c;图5.4.1(a)所示电路的等效电路如图(b)所示。在分析放大电路的频率响应时&#xff0c;为了方便起见&#xff0c;一般将输入信号的频率范围分为中频、低频和高频三个频段。在中频段&#xff0c;极间电容…

Win10系统打开控制面板出现闪退怎么回事?

Win10系统打开控制面板出现闪退怎么回事&#xff1f;有用户开启自己电脑的控制面板时&#xff0c;突然间页面初选了闪退的情况&#xff0c;导致无法进行相关设置的操作。那么我们怎么去进行控制面板闪退问题的解决呢&#xff1f;一起来看看以下的解决方法吧。 解决方法 1、更换…

Python | 文件操作和异常处理

博主简介&#x1f647;&#xff1a;&#x1f393;本科大二学生&#x1f393;&#xff0c;立志成为一名全栈开发工程师&#x1f38f;&#x1f38f;分类专栏&#x1f4d8;&#xff1a;Python从入门到精通&#x1f33b;&#x1f33b; 知识目录一、文件操作1.1 打开和关闭文件1.2 读…

如何使用TCPA300电流放大器和电流探头进行电流测试

为了进行正确电流测试&#xff0c;工程师需要在使用前对电流探头进行消磁和校零调节&#xff0c;消磁可以消除电流探头的寄生磁场&#xff0c;否则会产生零点的漂移和测量误差&#xff0c;每次进行消磁后&#xff0c;都需要调节探头的零点&#xff0c;消除存在的偏移。电流探头…

垃圾桶溢出识别系统 opencv

垃圾桶溢出识别系统通过Opencvyolo网络模型深度学习技术&#xff0c;对垃圾桶垃圾溢出行为现象进行识别&#xff0c;监测到垃圾桶存在垃圾溢出时&#xff0c;立即抓拍存档 告警及时清理。OpenCV基于C实现&#xff0c;同时提供python, Ruby, Matlab等语言的接口。OpenCV-Python是…