vant安装教程(基于vue3)

1、先安装

npm i vant

如果不行安装这个

yarn add vant

2、在main.js中引入即可

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button } from 'vant';
import 'vant/lib/index.css';createApp(App).use(Button).use(store).use(router).mount('#app')

3、然后在需要的页面使用就可以了

  <van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

4、结果截图

运行效果

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

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

相关文章

Cesium 展示——加载 tileset.json 格式的模型数据

文章目录 需求分析需求 已给 tileset.json 文件,现需加载该模型文件, 该模型特点:模型上的各模块均可以进行点击设置,且相机视角拉近后可以看到内部隐藏的物件模块 分析 tileset.json :模型数据【模型加载】方法export function init3dTileLayer (option) {var tilesetMo…

搜索专项---IDA*

文章目录 排书回转游戏 一、排书OJ链接 本题思路:先考虑每一步的决策数量&#xff1a;当抽取长度为 i 的一段时&#xff0c;有 n−i1 种抽法&#xff0c;对于每种抽法&#xff0c;有 n−i 种放法。另外&#xff0c;将某一段向前移动&#xff0c;等价于将跳过的那段向后移动&am…

有哪些副业渠道?

夸克网盘这个软件出来好久了&#xff0c;官方前不久才开通了推广渠道&#xff0c;这就给了我们以此赚钱的机会。具体时间应该是在2022年12月份。 所谓夸克网盘拉新&#xff0c;就是夸克网盘为了抢占市场&#xff0c;与其他网盘竞争对手&#xff08;百度网盘、迅雷网盘等&#…

【软件架构】01-架构的概述

1、定义 软件架构就是软件的顶层结构 RUP&#xff08;统一过程开发&#xff09;4 1 视图 1&#xff09;逻辑视图&#xff1a; 描述系统的功能、组件和它们之间的关系。它主要关注系统的静态结构&#xff0c;包括类、接口、包、模块等&#xff0c;并用于表示系统的组织结构…

从私人客户转变为教练会员网站

教练和顾问可以做出的最令人兴奋的转变之一就是通过教练会员网站扩大业务规模。 一对多优惠的类型有很多种&#xff0c;但与任何其他选择相比&#xff0c;教练和顾问的会员资格拥有最多的机会和灵活性&#xff0c;可以与你和你的客户一起发展。 世界正在转向更容易获得和更…

【程序员必备技能】Git入门

目录 &#x1f308;前言&#x1f308; &#x1f4c1; Git的概念 &#x1f4c2; 版本控制 &#x1f4c2; 集中式 和 分布式 ​ &#x1f4c1; 创建和配置本地仓库 &#x1f4c1; 理解工作区&#xff0c;暂存区&#xff0c;版本库 &#x1f4c1; Git的基本操作 &#x1f4c2;…

如何增加层次厚度?

Q 老师&#xff0c;我在做一个斧头武器&#xff0c;如何在平面上增加厚度和层次呢&#xff1f; A 选中这几个线&#xff0c;点连接就会出现中线&#xff0c;把中线稍作调整即可~

Open3D 基于最小生成树的法线定向 (27)

Open3D 基于最小生成树的法线定向 (27) 一、算法介绍二、算法实现一、算法介绍 法线计算的方向通常都存在方向问题,用Open3D估计的点云法线,是在每个点的局部进行拟合,估计的法线方向并不一致,Open3D提供了使用最小生成树调整法线到统一方向的方法,下面是具体的实现代码…

LeetCode 热题 100 | 二叉树(二)

目录 1 543. 二叉树的直径 2 102. 二叉树的层序遍历 3 108. 将有序数组转换为二叉搜索树 菜鸟做题&#xff0c;语言是 C 1 543. 二叉树的直径 这道题和 124. 二叉树中的最大路径和 太像了 题眼&#xff1a;二叉树的 直径 是指树中任意两个节点之间 最长路径的长度 。…

174基于matlab的雷达数字信号处理

基于matlab的雷达数字信号处理。该程序具备对雷达目标回波的处理能力&#xff0c;能够从噪声中将目标检测出来&#xff0c;并提取目标的距离、速度、角度信息。有相应的试验文档。程序已调通&#xff0c;可直接运行。 174 雷达数字信号处理 目标检测出来 (xiaohongshu.com)

Apache DolphinScheduler 3.2.1 版本发布:增强功能与安全性的全面升级

近期&#xff0c;Apache DolphinScheduler 社区激动地宣布 3.2.1 版本的发布。此次更新不仅着力解决了前一版本&#xff08;3.2.0&#xff09;中遗留的问题&#xff0c;而且引入了一系列的功能增强和优化措施。 原先的问题主要源于部分重要代码在发布过程中未能成功合并&#x…

多表联合分页查询(二)---- springboot整合MybatisPlus分页代码

目录 一、分页配置代码解读&#xff08;使用MP自带分页&#xff09;二、Controller层代码解读三、service层代码解读四、Mapper层代码解读五、结果展示 一、分页配置代码解读&#xff08;使用MP自带分页&#xff09; package com.minster.yanapi.Config;import com.baomidou.m…

matlab 三质量-弹簧系统受激振力

1、内容简介 略 44-可以交流、咨询、答疑 建立系统运动方程&#xff0c;研究固有频率和对应主振型 2、内容说明 略 三质量&#xff0d;弹簧系统受激振力&#xff0c;并不考虑各自的阻尼。建立系统运动方程。 解&#xff1a;由于阻尼对固有频率没有影响&#xff0c;故本文不…

Sora将创造多少算力需求?

1.1 Sora 训练与推理算力需求初步测算 Sora发布表现亮眼&#xff0c;TransformerDiffusion架构或成为文生视频大模型新范式。据Sora技术报告&#xff0c;类似于LLM将不同文本数据统一为token&#xff0c;Sora可将不同类型的视频和图像等视觉数据统一为patches&#xff0c;具体…

IDA使用-2023CICSN华中赛区pwn题逆向为例

文章目录 相关字节标识导入函数和导出函数找程序入口函数选项设置重命名CISCN2023华中赛区分区赛AWDIDA源码main 构造结构体sub_141B() 打开局部变量类型的视图增加变量类型重新定义变量类型再次设置变量类型并重新定义再次设置变量类型并重新定义再次设置变量类型并重新定义 设…

【数据结构与算法】(20)高级数据结构与算法设计之 Greedy Algorithm 贪心算法 代码示例与详细讲解

目录 4.2 Greedy Algorithm1) 贪心例子DijkstraPrimKruskal 2) 零钱兑换问题有几个解&#xff08;零钱兑换 II&#xff09;Leetcode 518最优解&#xff08;零钱兑换&#xff09;- 穷举法 Leetcode 322最优解&#xff08;零钱兑换&#xff09;- 贪心法 Leetcode 322 3) Huffman …

线程池的常用实现及执行流程

线程池 线程池线程池接口线程池参数线程池分类动态数目线程池固定数目线程池单例线程池任务调度线程池 线程池的执行流程 线程池 线程池接口 线程池参数 1、corePoolSize&#xff1a;核心线程数&#xff0c;线程池中最少线程&#xff0c;核心线程不会被回收。 2、maximumPoo…

6-pytorch-神经网络搭建

b站小土堆pytorch教程学习笔记 1.神经网络骨架搭建&#xff1a;Containers 官方文档代码&#xff1a; import torch.nn as nn import torch.nn.functional as Fclass Model(nn.Module):def __init__(self):super().__init__()self.conv1 nn.Conv2d(1, 20, 5)self.conv2 nn.…

nccl2安装指南

https://developer.nvidia.com/nccl/nccl-download 旧版本安装: https://developer.nvidia.com/nccl/nccl-legacy-downloads 找到你对应的CUDA版本 我这里选择 deb 文件安装了 sudo dpkg -i nccl-local-repo-ubuntu2004-2.16.5-cuda11.8_1.0-1_amd64.debsudo cp /var/nccl-lo…

深度解析:Integer.parseInt() 源码解读

深度解析&#xff1a;Integer.parseInt() 源码解读 关键要点 解析字符&#xff1a;用于将字符转换为对应的数字值 Character.digit(s.charAt(i),radix) 确定limit&#xff1a;根据正负号分别设定 int limit -Integer.MAX_VALUE;【正】 limit Integer.MIN_VALUE;【负】 负数…