uni-app小程序使用vant

news2024/10/6 4:12:32

步骤一:安装 Vant Weapp

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

步骤二:在根目录下创建“wxcomponents”文件夹

步骤三:找到依赖node_modules/@vant/weapp/dist,复制dist文件

在这里插入图片描述

步骤四:把刚刚复制的dist文件粘贴到刚刚新建的“wxcomponents”文件下同时将dist改名为vant

在这里插入图片描述

步骤五:在“pages.json”/“globalStyle”里配置“usingComponents”

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"van-action-sheet": "/wxcomponents/vant/action-sheet/index",
			"van-area": "/wxcomponents/vant/area/index",
			"van-button": "/wxcomponents/vant/button/index",
			"van-card": "/wxcomponents/vant/card/index",
			"van-cell": "/wxcomponents/vant/cell/index",
			"van-cell-group": "/wxcomponents/vant/cell-group/index",
			"van-checkbox": "/wxcomponents/vant/checkbox/index",
			"van-checkbox-group": "/wxcomponents/vant/checkbox-group/index",
			"van-col": "/wxcomponents/vant/col/index",
			"van-dialog": "/wxcomponents/vant/dialog/index",
			"van-field": "/wxcomponents/vant/field/index",
			"van-goods-action": "/wxcomponents/vant/goods-action/index",
			"van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index",
			"van-goods-action-button": "/wxcomponents/vant/goods-action-button/index",
			"van-icon": "/wxcomponents/vant/icon/index",
			"van-loading": "/wxcomponents/vant/loading/index",
			"van-nav-bar": "/wxcomponents/vant/nav-bar/index",
			"van-notice-bar": "/wxcomponents/vant/notice-bar/index",
			"van-notify": "/wxcomponents/vant/notify/index",
			"van-panel": "/wxcomponents/vant/panel/index",
			"van-popup": "/wxcomponents/vant/popup/index",
			"van-progress": "/wxcomponents/vant/progress/index",
			"van-radio": "/wxcomponents/vant/radio/index",
			"van-radio-group": "/wxcomponents/vant/radio-group/index",
			"van-row": "/wxcomponents/vant/row/index",
			"van-search": "/wxcomponents/vant/search/index",
			"van-slider": "/wxcomponents/vant/slider/index",
			"van-stepper": "/wxcomponents/vant/stepper/index",
			"van-steps": "/wxcomponents/vant/steps/index",
			"van-submit-bar": "/wxcomponents/vant/submit-bar/index",
			"van-swipe-cell": "/wxcomponents/vant/swipe-cell/index",
			"van-switch": "/wxcomponents/vant/switch/index",
			"van-tab": "/wxcomponents/vant/tab/index",
			"van-tabs": "/wxcomponents/vant/tabs/index",
			"van-tabbar": "/wxcomponents/vant/tabbar/index",
			"van-tabbar-item": "/wxcomponents/vant/tabbar-item/index",
			"van-tag": "/wxcomponents/vant/tag/index",
			"van-toast": "/wxcomponents/vant/toast/index",
			"van-transition": "/wxcomponents/vant/transition/index",
			"van-tree-select": "/wxcomponents/vant/tree-select/index",
			"van-datetime-picker": "/wxcomponents/vant/datetime-picker/index",
			"van-rate": "/wxcomponents/vant/rate/index",
			"van-collapse": "/wxcomponents/vant/collapse/index",
			"van-collapse-item": "/wxcomponents/vant/collapse-item/index",
			"van-picker": "/wxcomponents/vant/picker/index",
			"van-empty": "/wxcomponents/vant/empty/index"
		}
	},

步骤六:使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

end~~~

如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!

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

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

相关文章

win7中安装node14和vue

下载并安装低版本node 13 到官网去找早期历史版本的 nodejs 13 msi格式即可&#xff0c;并一键安装&#xff0c;我安装在了 D:\Program Files\nodejs 目录下 https://nodejs.org/download/release/v13.14.0/ 下载高版本node 14 下载高版本的node zip包 https://nodejs.org/…

AndroidPicker的使用

项目地址&#xff1a;https://github.com/gzu-liyujiang/AndroidPicker 历史版本:https://github.com/gzu-liyujiang/AndroidPicker/blob/master/ChangeLog.md 依赖配置 // JitPack 远程仓库&#xff1a;https://jitpack.iomaven { url https://jitpack.io } 所有选择器的基…

网络安全(网络安全)小白自学

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全…

利用日期创建文件-多用于数据库的备份

功能&#xff1a;根据日期变化实现文件的创建 1&#xff09;知识点&#xff0c;date命令的用法 --date"n day ago" %Y%m%d #n天前&#xff0c;当天则可以去掉--date参数 2&#xff09;文件名的拼接 ${filename}${date} 3查看结果文件 后期学循环语句可以改一下…

git,ssh,sourcetree代码管理

安装Git并建立与GitHub的ssh连接 1、安装git&#xff0c;设置git的用户信息&#xff08;需要通过用户信息来显示你是谁&#xff09; 2、配置SSH&#xff0c; 因为本地Git仓库和GitHub仓库之间的传输是通过SSH加密传输的&#xff0c;GitHub需要识别是否是你推送&#xff0c;Git…

部署ELK

一、elasticsearch #拉取镜像 docker pull elasticsearch:7.12.1 #创建ELK docker网络 docker network create elk #启动ELK docker run -d --name es --net elk -P -e "discovery.typesingle-node" elasticsearch:7.12.1 #拷贝配置文件 docker cp es:/usr/share/el…

HTML脚本、字符实体、URL

HTML脚本&#xff1a; JavaScript 使 HTML 页面具有更强的动态和交互性。 <script> 标签用于定义客户端脚本&#xff0c;比如 JavaScript。<script> 元素既可包含脚本语句&#xff0c;也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验…

网络安全好就业吗?

现目前而言&#xff0c;网络安全工程师仍是比较紧缺的。但网络安全行业前景好并≠网络安全的入学门槛低&#xff0c;也≠网络安全行业适合所有转岗的人。行业紧缺的一直是技术过硬&#xff0c;德才兼备的优秀人才。 一、网络安全适合哪些人&#xff1f; 首先&#xff0c;是对…

K8s Error: ImagePullBackOff 故障排除

Error: ImagePullBackOff 故障排除 1. 起因 起因是要在一组k8s环境下做个Prometheus的测试,当时虚拟机用完直接暂停了. 启动完master和node节点后重启了这些节点. 当检查dashboard时候发现Pod处于ImagePullBackOff状态,使用命令查看详细情况 kubectl describe pods -n kuber…

极简安装win10

0 概述 本文适合那些追求高性能的人。本文的重点不是具体步骤&#xff0c;而是使用高效系统的思路。 0.1 为什么选win10? 虽然目前win11都出来了&#xff0c;但很吃硬件&#xff0c;新机i12,i13的可以装win11。像我们这些买电脑好几年的(i7),还是win10更合适。 0.2 重装效…

R语言用jsonlite库写的一个图片爬虫

以下是一个使用R语言和jsonlite库下载图片的程序。首先&#xff0c;我们需要导入jsonlite库和options()函数&#xff0c;然后将代理服务器的主机名和端口号设置为"duoip"和"8000"。接着&#xff0c;我们将URL设置为"https://yun.baidu.com/"&…

R语言如何写一个爬虫代码模版

R语言爬虫是利用R语言中的网络爬虫包&#xff0c;如XML、RCurl、rvest等&#xff0c;批量自动将网页的内容抓取下来。在进行R语言爬虫之前&#xff0c;需要了解HTML、XML、JSON等网页语言&#xff0c;因为正是通过这些语言我们才能在网页中提取数据。 在爬虫过程中&#xff0c;…

链表指定结点的删除

删除节点就是将指定结点从链表中删除。 删除节点分为两种情况&#xff0c;一种是链表头删除&#xff0c;另一中链表中间或尾部删除。将待删节点于前一结点解除指向(中间或尾部)或直接删除该节结点并重建链表头(头节点)。 删除结点有以下情况&#xff1a; 1.链表为空&#xf…

ASTM F963-23美国玩具安全新标准发布

新标准发布 2023年10月13日&#xff0c;美国材料与试验协会&#xff08;ASTM&#xff09;发布了新版玩具安全标准ASTM F963-23。 主要更新内容 与ASTM F963-17相比&#xff0c;此次更新包括&#xff1a;单独描述了基材重金属元素的豁免情况&#xff0c;更新了邻苯二甲酸酯的管控…

Classifier-Free Guidance

1.为什么需要分类引导 顾名思义&#xff0c;在原来扩散模型的基础上加上一个引导&#xff0c;让扩散模型朝着我们想要的方向去生成图像 从上图可以了解到生成下一张图像是有分类器参与的 无分类器就是这种形式要参与下一张图像的生成

Proxysql读写分离

Proxysql读写分离 主从配置 # /etc/my.cnf 主节点 [mysqld] log-binmysql-bin server-id1从节点 [mysqld] server-id2 read_only1#初始化以及创建主从复制用户 mysql> alter user rootlocalhost identified with mysql_native_password by Jianren123; Query OK, 0 rows …

【QT】基本的绘图操作和高级绘图

基本绘图 新建项目 重新绘图事件 画基本图形 #include "widget.h" #include "ui_widget.h" #include <QPainter>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }/…

Jetpack:027-Jetpack中的Switch

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了Jetpack中Slider相关的内容&#xff0c;本章回中 主要介绍Switch。闲话休提&#xff0c;让我们一起Talk Android Jetpack吧&#xff01; 1. 概念介绍 我们在本章回…

Collction的List方法,list特有方法,遍历方式,迭代器选择

[to] list特有方法 //插入指定元素//list.add(1,"ddd");//System.out.println(list);//[aaa, ddd, bbb, ccc]//这个表示在一索引的位置插入ddd//他会把原来一索引位置的元素往后移动一位在添加//删除指定元素//String remove list.remove(1);//System.out.println(…

交换机基本配置

交换机基本配置 思科设备操作系统的3种模式 1.用户模式&#xff1a;标识符&#xff1a;> 默认处于的模式。 2.特权模式&#xff1a;标识符&#xff1a;# 在此模式中常常进行一些配置保存或配置查看。 3.全局模式&#xff1a;标识符&#xff1a;(config)# 在此模式中常…