您的当前位置:首页>全部文章>文章详情

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

CrazyPanda发表于:2023-12-21 22:51:10浏览:842次TAG:

前言

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

Vue3引入vant

  1. 新建一个uniapp项目,取名为 vue3-vant ,记得版本选择vue3
    1.png2. npm安装vant,要注意安装版本, 链接如下:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

1.png

1.png

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

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

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

  1. 使用button组件,在首页使用一下,看看有没有效果,有就成功了
    1.png
    1.png

Vue2引入vant

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

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


文章转自https://blog.csdn.net/MinfCONS/article/details/129180226如有侵权可联系删除

猜你喜欢

【UniApp】如何在uniapp中实现倒计时和闹钟功能
如何在uniapp中实现倒计时和闹钟功能一、倒计时功能的实现:倒计时功能在实际开发中非常常见,可以用于实现各种倒计时功能,如验证码倒计时、秒杀倒计时等。下面通过uniapp框架来介绍如何实现倒计时功能。在uniapp项目中创建一个倒计时组件,可以命名为Countdown.vue。在Countdown.vue中,我们可以定义一个倒计时的变量和一个计时器的标志位,如下所示:<template>     <div>{{&nbs
发表于:2023-12-24 浏览:350 TAG:
【UniApp】使用uniapp实现图片裁剪功能
使用UniApp实现图片裁剪功能UniApp是基于Vue.js开发的一个跨平台开发框架,可用于快速构建小程序、H5、App等多平台应用。在UniApp中实现图片裁剪功能,需要借助第三方插件uni-image-cropper,并结合HTML5的canvas元素来完成。安装插件在UniApp项目根目录执行以下命令,安装uni-image-cropper插件:npm install uni-image-cropper安装完成后,在项目的main.js文件中引入插件:im
发表于:2023-12-23 浏览:613 TAG:
【UniApp】uniapp怎么隐藏导航
Uniapp是一种基于Vue.js开发的跨平台应用开发框架,它支持将一个应用打包成多个平台(如iOS、Android、H5等)。在开发Uniapp应用时,我们需要经常操作一些导航相关的功能,如导航栏、底部栏等的显示和隐藏。本文将介绍在Uniapp中如何实现隐藏导航的功能。在pages.json中配置导航栏先来看一下Uniapp中如何配置导航栏。在Uniapp中,我们可以通过pages.json文件来进行页面的配置。举个例子,在pages.json中如下配置:{   
发表于:2023-12-22 浏览:338 TAG:
【UniApp】如何在uniapp中实现图片上传和预览
如何在uniapp中实现图片上传和预览在现代社交网络和电子商务应用中,图片上传和预览功能是非常常见的需求。本文将介绍如何在uniapp中实现图片上传和预览的功能,并给出具体的代码示例。一、图片上传功能的实现在uniapp项目中,首先需要在页面中添加一个图片上传组件,如下所示:<template>   <view>     <image v-for="(item, in
发表于:2023-12-11 浏览:421 TAG:
【UniApp】uniapp及vue中动画功能实现方案
需求场景:实际开发过程中,我们经常遇到各类比较炫酷的动画开发,比如简单的echarts插件使用,animation动画等...动画实现方案:1.css动画,如gif,a-png,animation,transform等animation: handleAni 1s linear infinite; @keyframes handleAni {     0% { //css样式&
发表于:2023-12-12 浏览:376 TAG:
【UniApp】uniapp的标题怎么动态修改
Uniapp是一个基于Vue.js框架的跨平台开发工具,它可以将一个项目一次性编译成多个平台的应用程序,同时还提供了一些独特的功能,如动态修改标题等。在Uniapp中,我们可以很容易地实现动态修改标题的功能,具体方法如下:首先,在Vue组件中,我们可以使用mounted函数来获取到当前的页面实例,然后使用$refs属性来获取到头部组件中的标题组件,接着我们就可以使用this.$refs.title对象来对标题进行修改。示例代码如下:mounted() {  &nbs
发表于:2023-12-25 浏览:360 TAG:
【Uniapp】uniapp如何传递参数
一、通过URL传递参数URL是一种描述文件在计算机网络中位置的方式。在uniapp中,可以通过URL传递参数。在web开发中,可以通过query string来传递参数。在uniapp中有两种方式来进行URL传参:路由跳转和h5页面跳转:1.路由跳转uniapp中提供了一些路由相关的API,其中,uni.navigateTo和uni.redirectTo这两个API可以在跳转时携带参数。在跳转时,可以将参数以对象的形式传递给URL,并以query string(查询字符串)的形式来表示。如下所示
发表于:2024-03-26 浏览:324 TAG:
【UniApp】Flutter与uniapp的异同:从框架架构到开发语言的对比
在移动应用开发领域,Flutter和uniapp都是备受关注的跨平台框架,它们在很多方面都具有相似之处,但也存在着一些个别的差异。本文将从框架架构、开发语言以及跨平台能力等方面对比Flutter和uniapp,以帮助开发者更好地选择适合自己项目的开发工具。一、框架架构Flutter是由Google开发的开源框架,其核心特点是使用Dart语言进行开发。Flutter的框架架构是基于自绘引擎的方式,通过渲染引擎直接绘制UI界面,不依赖于平台的原生控件。这种方式使得Flutter具有较高的灵活性和自定
发表于:2024-03-31 浏览:273 TAG:
【UniApp】UniApp实现支付宝小程序的开发与上线流程解析
UniApp是一款基于Vue.js框架的跨平台开发工具,能够快速实现一次编码,多端发布的效果。作为开发者,我们可以利用UniApp来实现支付宝小程序的开发,同时本文将对支付宝小程序开发与上线流程进行详细解析,并提供相应的代码示例供参考。一、UniApp与支付宝小程序开发环境搭建1.确保已安装好Node.js环境,如未安装,可前往Node.js官网下载并安装最新版本。2.在命令行中执行以下命令,安装全局Vue-cli脚手架工具:npm install -g 
发表于:2023-12-26 浏览:364 TAG:
【UniApp】uniapp 定义动画的几种方式
本章的前提就是大家都知道动画的基本属性,例如 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction 属性。了解更多 animation 相关的内容。现在制作一个左右抖动的动画效果,效果如下:在 uniapp 中,可以通过如下两种方式来完成。1. 直接使用 CSS 动画1.1 定义动画@keyframes&nb
发表于:2023-12-12 浏览:325 TAG: