uniapp中引入vant Weapp

news2025/1/12 5:57:32

Vant Weapp官:https://vant-contrib.gitee.io/vant-weapp/#/home

步骤一:下载vant组件插件

从github上下载该插件https://github.com/youzan/vant-weapp
在这里插入图片描述
只要这个dist文件夹,把dist重命名为vant;

步骤二:

与pages文件夹同级(在项目根目录),创建一个空的文件夹,名为 wxcomponents 必须是这个名字
在这里插入图片描述

将vant(由dist文件夹重命名为vant的文件)文件夹放到wxcomponents里面在这里插入图片描述

步骤三:

在pages.json中,按需引入vant组件在这里插入图片描述

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

步骤四:

在app.vue中全局引入样式

<style lang='scss'>
	@import "/wxcomponents/vant/common/index.wxss"
</style>

步骤五:

使用组件在这里插入图片描述在这里插入图片描述

Uniapp使用vant Weapp图标组件报错问题

1、异常信息【index.wxss里的 url(前面加空格全局替换(引入的字体图标路径有问题】

11:43:21.725 Module build failed (from ./node_modules/postcss-loader/src/index.js):
11:43:21.725 SyntaxError
11:43:21.735 (36:10521) Unclosed bracket
11:43:21.736   34 | 
11:43:21.741   35 | 
11:43:21.742 > 36 | @import '../common/index.css';.van-icon{text-rendering:auto;-webkit-font-smoothing:antialiased;font:normal normal normal 14px/1

修改/wxcomponents/vant/icon/index.wxss
如下图在format(“woff2”)后面的url前面加个空格,需要修改两处(或者对这个css文件进行格式化)
在这里插入图片描述

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

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

相关文章

301-295- 至少有 K 个重复字符的最长子串-0105

题解 本题使用分治策略,如果某个字符的出现次数小于k,则用它将数组分开,再把每个子数组组委参数递归执行.如果都大于k,则将该字符串的长度返回. 用一个字符分割,往深了分割各子字符串,这个字符分割完成,使用另一个字符进行分割,而不是一次用多个字符进行分割.这个题递归有些绕…

电脑怎么重装系统?小白也能轻松掌握这些方法

重新安装计算机系统有两种原因&#xff1a;一种是计算机系统可以正常使用&#xff0c;但是电脑比较卡&#xff0c;为了提高它的运行速度&#xff0c;所以想要通过重新安装系统来解决这个问题&#xff1b;另一种原因是计算机系统文件丢失&#xff0c;系统出现蓝屏&#xff0c;或…

MQ概念简介

队列管理器 队列管理器是MQ系统中最上层的一个概念&#xff0c;由它为我们提供基于队列的消息服务。 2) 消息 在MQ中&#xff0c;我们把应用程序交由MQ传输的数据定义为消息&#xff0c;我们可以定义消息的内容并对消息进行广义的理解&#xff0c;比如&#xff1a;用户的各种类…

机器学习100天(二十九):029 K折交叉验证

机器学习100天,今天讲的是:K 折交叉验证! 《机器学习100天》完整目录:目录 机器学习中,我们常会遇到一个问题,就是超参数的选择,超参数就是机器学习算法中的调优参数,比如上一节 K 近邻算法中的 K 值。K 折交叉验证就是帮助我们选择最优的超参数。 首先,介绍一下简…

FPGA并行计算可编程芯片

玩转Zynq可以使用Vivado创建一个FPGA工程。什么是FPGA前言自FPGA诞生以来&#xff0c;FPGA&#xff08;现场可编程门阵列&#xff09;就引起了人们的关注。在1980年代中期&#xff0c;Ross Freeman和他的同事从Zilog购买了该技术&#xff0c;并创建了Xilinx&#xff0c;目标是A…

基于Java+SpringBoot+vue+node.js实现自行车租赁平台管理系统

基于JavaSpringBootvuenode.js实现自行车租赁平台管理系统 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式 文章目录基于JavaSp…

netmap: UDP 协议栈的实现

文章目录1、获取以太网数据1.1、netmap 原理1.2、netmap 环境搭建2、udp 协议栈的实现2.1、以太网帧2.2、ip 协议2.3、udp 协议2.4、问题分析3、ARP 协议的实现4、icmp 协议的实现5、netmap 代码实现1、获取以太网数据 自定义协议栈&#xff0c;需要获取原始的以太网数据&…

第50问:从连接判断应用访问数据库的异常行为

问 我发现应用有一根访问数据库的连接有异常流量&#xff0c;如何判断是应用哪个逻辑导致了异常行为 实验 先起锅烧一个数据库实例&#xff1a; 我们用 mysqlslap 作为应用&#xff1a; 假设在 MySQL 中&#xff0c;我们认为这根连接有异常流量&#xff1a; 通过 ss 找到这根…

阿里一面 | 说说你对 MySQL 死锁的理解

1、什么是死锁&#xff1f; 死锁指的是在两个或两个以上不同的进程或线程中&#xff0c;由于存在共同资源的竞争或进程&#xff08;或线程&#xff09;间的通讯而导致各个线程间相互挂起等待&#xff0c;如果没有外力作用&#xff0c;最终会引发整个系统崩溃。 2、Mysql出现死…

cordova-Toast的使用 -官方插件和自定义插件

前言&#xff1a;cordova是使用前端技术来开发app,可以节省成本和快速发布。不需要了解原生app开发 加载web的方式&#xff0c;可以兼容生成Android、ios以及浏览器等各种平台的项目 前文&#xff1a;cordova开发流程 一、官方提示浮动框 cordova-plugin-x-toast 1.cordova pl…

二、GtkApplication and GtkApplicationWindow

1 GtkApplication 1.1 GtkApplication and g_application_run 人们编写编程代码来开发应用程序。什么是应用程序?应用程序是使用库运行的软件&#xff0c;其中包括操作系统、框架等。在GTK 4编程中&#xff0c;GTK应用程序是使用GTK库运行的程序(或可执行程序)。 编写GtkAp…

屏幕录制有快捷键吗?录屏快捷键ctrl加什么

我们日常使用的电脑是自带录屏功能&#xff0c;可以方便我们将玩游戏的精彩画面&#xff0c;或者是电影某个片段给录制下来。为了不错过这些精彩片段&#xff0c;可以使用录屏快捷键录制。那电脑录屏快捷键ctrl加什么&#xff1f;今天本文就简单地给大家介绍电脑录屏快捷键&…

【错误记录】IntelliJ IDEA 编译 Java 文件报错 ( 错误: 非法字符: ‘\ufeff‘ )

文章目录一、报错信息二、修改方案一、报错信息 报错信息 : D:\002_Project\003_Java_Work\Xxx\src\main\java\cn\Xxx.java:1: 错误: 非法字符: \ufeff &#xfeff;package xxx;出现该问题的原因是 IntelliJ IDEA 在创建文件时 , 为文件添加了 BOM 隐藏字符 , 这是 文件的 字…

(七)汇编语言——更灵活的定位内存地址的方法

目录 and和or ASCII码 [bxidata] SI和DI寄存器 [bxsi]和[bxdi] [bxsiidata]和[bxdiidata] 总结 例子&#xff08;双重循环的解决方案&#xff09; 我们知道&#xff0c;对于汇编来说&#xff0c;内存是极为重要的&#xff0c;所以&#xff0c;能精准且巧妙地定位内存地…

进程间通信——信号

目录 1 概念 2 信号类型 linux的基本信号类型 操作 常用的信号 3 怎么操作信号 signal kill raise alarm pause 注意 范例1&#xff08;自己用信号发送书写sleep函数实现定时炸弹&#xff09; 范例2&#xff08;用信号发送书写功能检测用户是否输入&#xff0c;如…

OAuth2.0协议流程与授权模式、协议流程

什么是OAuth2.0OAuth&#xff08;Open Authorization&#xff09;是一个关于授权&#xff08;authorization&#xff09;的开放网络标准&#xff0c;允许用户授权第三方应用访问他们存储在另外的服务提供者上的信息&#xff0c;而不需要将用户名和密码提供给第三方移动应用或分…

Java 如何优雅的导出 Excel

前言 公司项目最近有一个需要&#xff1a;报表导出。整个系统下来&#xff0c;起码超过一百张报表需要导出。这个时候如何优雅的实现报表导出&#xff0c;释放生产力就显得很重要了。下面主要给大家分享一下该工具类的使用方法与实现思路。 实现的功能点 对于每个报表都相同…

看零信任如何基于PKI体系实现数字信任

谈到安全&#xff0c;在万物互联的数字世界里&#xff0c;生活和工作之间的界限正在变得越来越模糊&#xff0c;传统的边界不再适用&#xff0c;传统的安全手段也不再适用。数字转型的步伐虽在不断加速&#xff0c;但威胁载体也在不断发展壮大&#xff0c;在数字互动过程中&…

从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库)

往期 从0到1完成一个Vue后台管理项目&#xff08;一、创建项目&#xff09; 从0到1完成一个Vue后台管理项目&#xff08;二、使用element-ui&#xff09; 安装CSS预处理器 Sass cnpm i sass-loader7 node-sass4 -S 安装完就可以使用了&#xff0c;通过lang的方式 这里注意自…

C#,桌面编程入门(01)——按钮Button属性与事件、动态创建、快捷键、控件数组及自定义Button

本文是《桌面编程入门》系列文章的开山之篇。《桌面编程入门》系列文章主要介绍桌面编程的各种组件&#xff0c;Button&#xff0c;ComboBox&#xff0c;Panel&#xff0c;WebBrowser。。。。。。类似的文章非常多&#xff0c;深度不同&#xff0c;水平不等。1 桌面编程1.1 图形…