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、结果截图

运行效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

qt-C++笔记之事件过滤器

qt-C笔记之事件过滤器 —— 杭州 2024-02-25 code review! 文章目录 qt-C笔记之事件过滤器一.使用事件过滤器和不使用事件过滤器对比1.1.使用事件过滤器1.2.不使用事件过滤器1.3.比较 二.Qt 中事件过滤器存在的意义三.为什么要重写QObject的eventFilter方法&#xff1f;使用QO…

土耳其商务团一行莅临优积科技考察交流

7月31日土耳其商务代表Emre Arif Parlak等一行三人莅临优积科技考察交流&#xff0c;公司CEO刘其东携团队成员热情接待并深入交流。 商务团首先参观了我司产品生产基地&#xff0c;详细了解了钢结构模块的生产加工工艺流程和质量控制体系。随后参观了我司模块化学校样板房、模块…

Jmeter系列(2)目录介绍

目录 Jmeter目录介绍bin目录docsextrasliblicensesprintable_docs Jmeter目录介绍 在学习Jmeter之前&#xff0c;需要先对工具的目录有些了解&#xff0c;也会方便后续的学习 bin目录 examplesCSV目录中有CSV样例jmeter.batwindow 启动文件jmeter.shMac/linux的启动文件jmete…

企业想要高效上云?如何实现?

进入数字化、智能化时代以后&#xff0c;企业数字化转型已成为企业发展的必然趋势。浪潮之中&#xff0c;越来越多的企业开始积极探索上云路径&#xff0c;云上创新已经成为企业加速数字化转型&#xff0c;提升竞争力的必经之路。 赞奇与华为携手共创云桌面SaaS产品—赞奇云工作…

医院管理系统小程序

**&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;**一 、设计说明 1.1 研究背景…

解决方案 || 在Windows中运行含有bash命令的开源代码仓库

在Windows中运行含有bash命令的开源代码仓库 文章目录 在Windows中运行含有bash命令的开源代码仓库问题分析解决方案使用Git Bash使用Windows Subsystem for Linux (WSL)使用Cygwin 结论 问题分析 在开源社区中&#xff0c;许多项目都是基于Unix-like系统&#xff08;如Linux或…

EXCEL如何从另一个表查找匹配信息

目录 1.背景&#xff1a;我们有一个目标呈现表&#xff0c;想要从另一个表中查询得到信息&#xff0c;比如根据身份证id查询该id的名字、性别等个人基本信息&#xff0c;或者从另一个财务信息表查询该id的工资信息等&#xff1b; 2.基础方法&#xff1a;利用VLOOKUP函数根据单…

操作系统--设备管理

一、设备控制器 我们的电脑设备可以接非常多的输入输出设备&#xff0c;比如键盘、鼠标、显示器、网卡、硬盘、打印机、音响等等&#xff0c;每个设备的用法和功能都不同。为了屏蔽设备之间的差异&#xff0c;每个设备都有一个叫设备控制器&#xff08;Device Control&#xf…

淘金优化算法GRO求解不闭合MD-MTSP,可以修改旅行商个数及起点(提供MATLAB代码)

一、淘金优化算法GRO 淘金优化算法&#xff08;Gold rush optimizer&#xff0c;GRO&#xff09;由Kamran Zolf于2023年提出&#xff0c;其灵感来自淘金热&#xff0c;模拟淘金者进行黄金勘探行为。淘金优化算法&#xff08;Gold rush optimizer&#xff0c;GRO&#xff09;提…

PostgreSQL 与MySQL 对比使用

一、前言 博主的系统既有 用到MySQL 也有用到PostgreSQL &#xff0c;之所以用到这两种数据库&#xff0c;主要是现在都是国产替代&#xff0c;虽然说这两款数据库也不是国产的&#xff0c;但是相对开源&#xff0c;oracle是不让用了。所以现在使用比较多的就是这两个关系型数据…

Canvas动画之豌豆射手

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 往期热门专栏回顾 专栏…

力扣1290. 二进制链表转整数

Problem: 1290. 二进制链表转整数 文章目录 题目描述思路复杂度Code 题目描述 思路 1.记录一个变量res初始化为0&#xff0c;指针p指向链表头&#xff1b; 2.循环每次res res * 2 p -> val;p p -> next;&#xff08;充分利用二进制数的特性&#xff1b;其中利用指针先…

Spring的生命周期

文章目录 第一章 对象的生命周期1.1 什么是对象的生命周期1.2 为什么要学习对象的生命周期1.3 生命周期的 3 个阶段1.3.1 创建阶段1.3.2 初始化阶段1.3.3 销毁阶段 1.4 总结 第二章 后置处理Bean2.1 后置处理Bean的运⾏原理分析2.2 BeanPostProcessor的开发步骤 第一章 对象的生…

哪个牌子的电视盒子好用?2024超强电视盒子排名

最近很多朋友问我电视盒子的相关问题&#xff0c;就目前来说&#xff0c;电视盒子的地位依然是不可取代的。我近来要发布的测评内容是哪个牌子的电视盒子好用&#xff0c;耗时两周进行对比后整理了电视盒子排名&#xff0c;看看哪些电视盒子是最值得入手的吧。 NO.1——泰捷新品…

有效涨点,增强型 YOLOV8 与多尺度注意力特征融合,附代码,详细步骤

目录 摘要 结构图 原理 代码实现 添加ymal文件 实验结果 可接论文指导----------> v jiabei-545 完整代码&#xff08;失效 -----------&#x1f446; &#xff09; 执行程序流程 摘要 在本实验中&#xff0c;我们通过将双层路由注意&#xff08;BRA&#xff09;…

[云原生] 二进制安装K8S(上)搭建单机matser、etcd集群和node节点

一、单机matser预部署设计 目前Kubernetes最新版本是v1.25&#xff0c;但大部分公司一般不会使用最新版本。 目前公司使用比较多的&#xff1a;老版本是v1.15&#xff0c;因为v1.16改变了很多API接口版本&#xff0c;国内目前使用比较多的是v1.18、v1.20。 组件部署&#xff…

Stable Diffusion 绘画入门教程(webui)-ControlNet(Inpaint)

上篇文章介绍了语义分割Tile/Blur&#xff0c;这篇文章介绍下Inpaint&#xff08;重绘&#xff09; Inpaint类似于图生图的局部重绘&#xff0c;但是Inpain效果要更好一点&#xff0c;和原图融合会更加融洽&#xff0c;下面是案例&#xff0c;可以看下效果&#xff08;左侧原图…

“美元是吸血鬼”!“这资产”成为最强避风港,兑14个国家货币创下历史新高!

随着比特币站稳5万美元大关&#xff0c;比特币兑土耳其、阿根廷、埃及、巴基斯坦、尼日利亚、日本和黎巴嫩等14个国家货币已创下历史新高。在价格尚未达到峰值69000美元前&#xff0c;多国货币的贬值造就了这一盛况&#xff0c;比特币正成为强大的避风港。 这种情况突显了14个国…

解决若依的分页失效问题

解决若依的分页失效问题 我的迷茫和胆怯也一直都在&#xff0c;但我告诉自己&#xff0c;就算是万丈深渊&#xff0c;走下去&#xff0c;也是前程万里。——木心《素履之往》 首先&#xff0c;我们根据若依的文档来清楚几个问题&#xff1a; 前端采用基于bootstrap的轻量级表格…

OpenAI视频生成Sora技术简析

基本介绍 Sora是春节期间OpenAI发布的产品&#xff0c;主要是通过文字描述生成视频&#xff0c;通过大规模视频数据训练而成的生成模型&#xff0c;当前还没开放试用。官方发布的技术报告&#xff1a;https://openai.com/research/video-generation-models-as-world-simulators…