Vant安装及必坑

news2025/4/6 16:39:27

 vant官网地址

 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

1.通过npm安装:

注意vue2和vue3不同,版本过高会报错

vue2

npm i vant@latest-v2

或者

npm i vant -S


vue3 

npm i vant

或者

npm i vant@next -S

 备注:若报错 Cannot read properties of null (reading 'isDescendantOf') 

 解决:

  • 方法二:删除已有的 node_modules,重新安装Vant ,执行命令 npm i vant

  • 或者执行npm uninstall vant再重新安装对应版本号

2.在 main.js 中加载注册 Vant 组件  (下面为全局导入方式) 

 

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
 
Vue.use(Vant)

3.使用

<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>
 
<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

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

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

相关文章

为什么信创国产化替代 必备 “开放式ETL产品“(下篇)

信创国产化通俗来讲&#xff0c;就是在核心芯片、基础硬件、操作系统、中间件、数据服务器等领域实现信创产业的国产替代。ETL技术 属于基础软件类中间件技术。发展自己研制的安全可靠的能够保证国家信息安全的设备&#xff0c;随着信息安全问题日益突出&#xff0c;信息安全已…

小程序 点击view内部元素 不传参

点击 内部图片和文字 type 得到的是空 无法传递参数 解决办法: 用 currentTarget 代替 target

【LangChain】数据连接(Data connection)

概要 许多LLM申请需要特定于用户的数据&#xff0c;这些数据不属于模型训练集的一部分。 LangChain 为您提供了通过以下方式加载、转换、存储和查询数据的构建块&#xff1a; Document loaders &#xff1a; 从许多不同来源加载文档Document transformers&#xff1a;拆分文档…

怎么把文档翻译成英文?这几款文档翻译工具都能实现

听说你正在寻找免费的文档翻译软件&#xff0c;我来给你一些建议吧&#xff01;翻译软件的确是个很有用的工具&#xff0c;能够帮助我们快速翻译各种语言的文档。而且现在有很多免费的选择&#xff0c;真是再好不过了&#xff01;但是随着市面上文档翻译软件数量的增多&#xf…

车载测试:车联网功能组件及安全测试策略

目录 一、车联网功能组件 车域网 IVI TBOX ECU TSP APP 通信及密码特殊指标 车端特殊指标 APP特殊指标 测试用例 一、车联网功能组件 车联网是以汽车智能化、网联化为基础&#xff0c;广泛应用新一代通信技术、人工智能技术构建起的新型基础设施。在整体架构上&…

单据小票打印模板自定义设计,手机收银软件APP搭配蓝牙便携打印机,移动便携打印零售单单据小票

单据小票打印模板自定义设计&#xff0c;手机收银软件APP搭配蓝牙便携打印机&#xff0c;移动便携打印零售单单据小票&#xff0c;轻松实现仓库条码管理&#xff0c;扫码入库出库盘点_哔哩哔哩_bilibili单据小票打印模板自定义设计&#xff0c;手机收银软件APP搭配蓝牙便携打印…

突破平凡:创造独特而吸引人的登陆页UI设计灵感

今天&#xff0c;我们从移动APP产品经理或者UI设计师的角度再来聊一聊APP登录设计方式和如何去设计这些有意思的APP登录模块。 1、熟悉目前常见的手机APP登陆方式 ① 账号登陆&#xff08;手机、邮箱&#xff09; ② 第三方登陆&#xff08;微信&#xff0c;QQ&#xff0c;微博…

Java编程-IDEA中Java的main方法、sout快捷键设置

目的 我打出psvm这四个字母时&#xff0c;可快速打出main方法 我打出syso,sout时&#xff0c;可快速打出System.out.println(); 步骤&#xff1a; 1、打开IDEA&#xff0c;点击文件&#xff0c;选择Editor中的 Live Templates选项&#xff0c;点击右侧边栏中的 号 2、选中…

quartus工具篇——Signal Tap

文章目录 quartus工具篇——Signal Tap1、Signal Tap简介2、操作步骤3、查看波形结果4、总结 quartus工具篇——Signal Tap 1、Signal Tap简介 Quartus中的Signal Tap是一种用于FPGA设计调试和分析的工具。它可以捕获和显示设计中的信号波形&#xff0c;帮助设计人员验证设计…

安卓:表示日期的控件

一、日期控件 &#xff08;一&#xff09;、DatePicker DatePicker是一种安卓平台上常用的控件&#xff0c;用于让用户选择日期。它通常以日历的形式显示&#xff0c;并允许用户通过滑动或点击来选择年、月和日。 常用属性&#xff1a; android:calendarViewShown&#xff1…

第一阶段-第十二章 Python基础的综合案例(数据可视化-动态柱状图)

目录 引、案例效果一、基础柱状图的构建  1.学习目标  2.通过Bar构建基础柱状图  3.反转x和y轴  4.数值标签在右侧  5.本节的演示  6.本小节的总结 二、基础时间线柱状图  1.学习目标  2.时间线  3. 自动播放  4.时间线的主题  5.本节的代码演示  6.本…

MSP432自主开发笔记3:串口__编写自定义printf发送函数、编写发送字节字符串函数编写

之前其实对于串口在收发字节、收发字符串方面的介绍已经挺完全了&#xff0c; 但今日无意间发现漏了些什么&#xff0c;之前有讲到过串口的printf()发送问题&#xff0c;但也仅仅教大家如何重定向printf&#xff08;&#xff09;&#xff1b;来决定向哪个串口发送数据. print…

代码随想录算法训练营第57天 | 动态规划 part17 ● 647 回文子串 ●516最长回文子序列 ●动归总结

#647 回文子串 自己不会做。 之前遇到的大部分题目是&#xff0c;我们求什么dp里面就放什么。但这道回文的题不是&#xff1a;" 本题如果我们定义&#xff0c;dp[i] 为 下标i结尾的字符串有 dp[i]个回文串的话&#xff0c;我们会发现很难找到递归关系。dp[i] 和 dp[i-1]…

自监督语义分割面模型——Masked Autoencoders Are Scalable Vision Learners(MAE)论文阅读

1、摘要 This paper shows that masked autoencoders (MAE) are scalable self-supervised learners for computer vision. Our MAE approach is simple: we mask random patches of the input image and reconstruct the missing pixels. It is based on two core designs. F…

实现二分搜索函数,设计脚手架程序进行自动测试。

1. 设计思路   二分搜索算法每次将数组中间值与目标值相比较&#xff0c;若相同&#xff0c;则该元素就是要寻找的元素&#xff0c;若不相同&#xff0c;二分搜索法通过一定的方法抛弃一半的待搜索区间&#xff0c;在剩余的区间中继续以相同方法搜索目标值. 2.源代码 #incl…

网络存储技术知识点整理

目录 前言1. 直接附加存储2. 网络附加存储3. 存储区域网络 前言 目前主流的存储技术只要有三种&#xff1a; 直接附加存储&#xff08;Direct Attached Storage&#xff0c;DAS&#xff09;网络附加存储&#xff08;Network Attached Storage&#xff0c;NAS&#xff09;存储…

flutter开发实战-Canvas绘图之Path路径动画

flutter开发实战-Canvas绘图之Path路径动画 flutter提供一块2D画布Canvas&#xff0c;Canvas内部封装了一些基本绘制的API&#xff0c;开发者可以通过Canvas绘制各种自定义图形。canvas上绘图&#xff0c;有多种不同的方式&#xff0c;常用的就是使用 Path。这里是flutter实现…

10分钟设置免费远程桌面

“你见过洛杉矶凌晨4点的样子吗&#xff1f;” 没有也没关系&#xff0c;你可以轻松配置一台位于洛杉矶的免费远程桌面。 利用Amazon全球可用区&#xff0c;甚至可以在世界各地搭建符合你配置需求的远程桌面。 本教程需要先拥有亚马逊云科技海外账户。目前注册亚马逊云科技账户…

32-ADC的寄存器

目录 stm32-adc通过比较获取电压原理 为什么会分注入组和规则组&#xff1f; “ECO"是指"Engineering Change Order”&#xff0c;即工程变更指令。 双ADC的不同模式以及为什么会有这个模式&#xff1a; 同步注入模式&#xff1a; 同步规则模式&#xff1a; 快…

应用系统的集成的方式

一、说明 应用系统的集成从技术上可以分为界面集成、数据集成、接口集成、流程集成和平台集成等多种方式。 二、详情 2.1界面集成 指的是系统与系统之间没有实质上的关联&#xff0c;只是汇聚到同样的应用接人点&#xff0c;采用类似的初始界面&#xff0c;或者统一的登录手…