【uniapp】uniapp项目vue2/vue3引入使用vant组件库

news2024/9/27 12:12:44

前言

vant是一个优秀的移动端组件库,他支持VUE2、VUE3、微信小程序三个框架,这期就来尝试在uniapp中,vue2和vue3分别引入vant组件库
注意:本教程只适用H5,无法运行到微信小程序

Vue3引入vant

  1. 新建一个uniapp项目,取名为 vue3-vant ,记得版本选择vue3
    在这里插入图片描述2. npm安装vant,要注意安装版本, 链接如下:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

在这里插入图片描述

在这里插入图片描述

可能会遇到上图错误,遇到的话在终端输入,npm init,然后一路回车即可。

  1. 全局引入 vant 组件
    我们刚才已经安装了vant,现在我们来在项目中使用他:在main.js里按照官网说的,全局挂载button组件
    在这里插入图片描述
    在这里插入图片描述

值得注意的是,VUE3是 createSSRApp,与官网描述的不同,没关系,照着我的图片做就好

  1. 使用button组件,在首页使用一下,看看有没有效果,有就成功了
    在这里插入图片描述
    在这里插入图片描述

Vue2引入vant

2023-02-23 踩了两个钟的坑,终于是引入成功了,我焯

https://juejin.cn/post/7158400373005713415,都在这个链接里,写的很详细照着做吧

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

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

相关文章

如何利用 Python 进行客户分群分析(附源码)

每个电子商务数据分析师必须掌握的一项数据聚类技能 如果你是一名在电子商务公司工作的数据分析师,从客户数据中挖掘潜在价值,来提高客户留存率很可能就是你的工作任务之一。 然而,客户数据是巨大的,每个客户的行为都不一样。20…

python中安装gurobi和pycharm没有语法提示问题解决

安装gurobi第一步 :下载gurobi ( http://www.gurobi.com ) ,需要注册账号第二步、申请License注册如果可以通过校园网, 则直接生成。不能的话,通过网站,发邮件申请 http://www.gurobi.cn/NewsView1.Asp?id4第三、邮件…

【虹科】基于Lidar的体积监控实现高效的库存管理

迄今为止,很多物料厂家测量库存的结果数据仍然不准确,会存在很大的误差,导致供应链效率低下——这个问题可以通过Lidar技术轻松解决。近年来,全球供应链的脆弱性已经多次得到证明。无论是油轮被困在苏伊士运河,阻塞海峡…

JSP 在线学习管理系统myeclipse定制开发sqlserver数据库网页模式java编程jdbc

一、源码特点 JSP 在线学习管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发,数据库为SQLServer2008&#x…

从事Python自动化测试,30岁熬到月薪20K+,分享我的多年面试经…

年少不懂面试经,读懂已是测试人。 大家好,我是小码哥,一名历经沧桑,看透互联网行业百态的测试从业者,经过数年的勤学苦练,精钻深研究,终于从初出茅庐的职场新手成长为现在的测试老鸟&#xff0…

nodejs/eggjs如何使用第三方pure esm lib

问题Instead change the require of index.js in xxx/app/ws/index.ts to a dynamic import() which is available in all CommonJS modules.上述错误发生在我使用import引入一个第三方包的时候提示的,至于原因,主要是node当前仅支持cjs,而目…

TCP的三握四挥

本文是向大家介绍tcp的三次握手四次挥手的全过程,能够让我们更熟悉面向连接的传输层控制协议的原理,保证了数据传输的稳定性和可靠性。如果我们把网络体系按照OSI模型划分,那么不论是从上往下还是从下往上数,处于最中间的都是传输…

复赛名单公布!2022隐私计算HACKATHON大赛火热进行中!

开放隐私计算开放隐私计算开放隐私计算OpenMPC是国内第一个且影响力最大的隐私计算开放社区。社区秉承开放共享的精神,专注于隐私计算行业的研究与布道。社区致力于隐私计算技术的传播,愿成为中国 “隐私计算最后一公里的服务区”。183篇原创内容公众号O…

Python+Qt生日提醒

PythonQt生日提醒如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01;前言这篇博客针对<<PythonQt生日提醒>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应用推荐首选。文章目…

在k8s集群部署ELK

使用kubeadm或者其他方式部署一套k8s集群。 在k8s集群创建一个namespace&#xff1a;halashow 2 ELK部署架构 3.1 准备资源配置清单 Deployment中存在一个es的业务容器&#xff0c;和一个init容器&#xff0c;init容器主要是配置vm.max_map_count262144。 service暴露了9200…

MSP430F2132IRHBR功能框图TPS259824LNRGER电路保护和电源管理解决方案芯片

概述&#xff1a;MSP430F21x2 16位超低功耗微控制器 (MCU) 是MSP430系列微控制器的一部分。这些MCU采用一种架构&#xff0c;加上5种低功耗模式&#xff0c;能在便携式测量应用中延长电池的使用寿命。这些器件具有一个强大的16位 RISC CPU、16位寄存器和用于获得最大编码效率的…

Springboot整合mybatis并接收前端数据

mybatis之前记录过了。本以为可以快乐的开发项目&#xff0c;但是没想到在springboot中使用mybatis还不一样&#xff0c;那么我就在这里记录一下。 请注意&#xff0c;sprngboot中使用的mybatis是专门为springboot设计的&#xff0c;单独引用依赖的话需要在springboot找到如下…

Java性能分析

0、问题代码&#xff1a; 代码问题其实很明显&#xff0c;但是这里主要是为了练习如何使用工具进行分析 所以最好先不要看代码&#xff0c;假装不知道程序逻辑&#xff0c;而是先通过工具去分析&#xff0c;再结合分析数据去看代码&#xff0c;从而推出问题点在哪 import jav…

代码随想录NO50 |动态规划_leetcode 392.判断子序列 115.不同的子序列

动态规划_leetcode 392.判断子序列 115.不同的子序列今天继续子序列&#xff01; 392.判断子序列 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j] 表示以下标i-1为结尾的字符串s&#xff0c;和以下标j-1为结尾的字符串t&#xff0c;相同子序列的长度为dp…

靠谱的动漫绘画培训班国内有哪些

动漫绘画培训班有哪些&#xff0c;今天给大家带来的是国内专业的动漫培训机构排名&#xff0c;这5个动漫培训机构&#xff0c;相信你一定都知道&#xff0c;快来看看吧&#xff01; 一&#xff1a;动漫绘画培训机构排名 1、轻微课 轻微课是国内人气很高的板绘学习平台&#…

2.23作业ccc

检测中断到来时&#xff0c;让LED灯状态取反&#xff0c;并且在串口工具上打印一句话例如&#xff1a;当按键1按下之后&#xff0c;让LED1状态取反&#xff0c;并打印“LED1 down”当按键2按下之后&#xff0c;让LED2状态取反&#xff0c;并打印“LED2 down”当按键3按下之后&a…

vue2安装ant-design UI报错 ERR! peer vue@“>=3.2.0“ from ant-design-vue@3.2.15

npm install ant-design-vue --save 安装报错&#xff0c;使用的是vue2&#xff0c;如图&#xff0c; npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: default0.1.0 npm ERR! Found: vue2.7.14 npm ERR! v…

13.Jenkins集成sonarqube

Jenkins集成sonarqube1.jenkins集成sonarqube2.jenkins以maven的方式集成sonarqube scanner报错1报错21.jenkins集成sonarqube 1.在jenkins插件管理中安装sonarqube scanner 2.jenkins要知道sonarqube服务端是谁&#xff0c;需要配置&#xff08;系统管理–系统配置–sonarq…

Knife4j文档请求异常错误

一、问题描述 springboot项目配置Knife4j后&#xff0c;访问地址http://xxxx/doc.html出现错误&#xff1a;Knife4j文档请求异常错误。 二、解决问题 使用google浏览器F12查看控制台后&#xff0c;发现有错误提示&#xff1a; 大致意思是某部分字段不能被有效解析为json。在…

因果推断方法(一)合成控制

知道的跳过下面的简单介绍&#xff1a; 就是比如广告主投放了10w元&#xff0c;那么他的收益怎么算&#xff1f;哪些订单就是广告带来的&#xff0c;哪些是不放广告也会购买&#xff1f; 合成控制法是目前我实际应用发现最好用的。置信度高&#xff0c;且容易理解。 简单讲下思…