vant ui使用

这篇具有很好参考价值的文章主要介绍了vant ui使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.vant-ui的团队

Vant 开源的移动端组件库是由有赞前端团队开发的,于 2017 年开源。有赞前端团队,几乎所有的微信用户 他关注的公众号当中,就会有一个页面是由有赞来进行搭建 维护和管理的

二.安装

方式有很多,最常用的就是通过npm或者yarn在项目中进行安装

npm 安装方式

在vue2.x项目当中 使用指令 npm i vant -S

在vue3.x项目当中 使用指令 npm i vant@next -S

使用脚手架安装方式

在使用图形化构建项目方式 vue ui

在构建项目过程中 在 依赖 -> 安装依赖 找到vant

选用vant-ui进行项目开发

使用cdn方式使用

在 html 文件中引入 CDN 链接

引入样式文件

引入vue.js文件

引入vant.js文件

三.引入组件方式

方式一 自动按需引入组件 (推荐)

自动按需引入组件方式 需要我们在项目中下载一个babel插件,

简单配置一下,它会在编译过程中将import的写法自动转换为按需引入的方式,不然可能就需要我们手动的引入样式和组件

使用步骤 项目中:

1,安装 babel-plugin-import插件 npm i babel-plugin-import -D
2,配置
1.现在基本使用babel7 所以对babel7以下场景的配置方法不作记录
2.详情可参考文章开头所给链接
3,接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式import { Button } from 'vant';
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

Tips: 如果你在使用 TypeScript,可以使用ts-import-plugin实现按需引入。

方式二 手动按需引入组件

在没有安装插件的情况下,我们还有一个办法使用vant

不厌其烦地引入对应组件的样式

不厌其烦地引入对应的组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style

方式三 导入所有组件

方式三是最粗暴的在项目中使用vant的方式之一,因为Vant 支持一次性导入所有组件,这样做虽然简单粗暴,但是引入所有组件会增加代码包体积,会导致项目运行很慢,因此不推荐这种做法。

下面是导入所有组件的使用过程

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Tips: 配置按需引入后,将不允许直接导入所有组件。文章来源地址https://www.toymoban.com/news/detail-462176.html

到了这里,关于vant ui使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 猿创征文|vue vant-ui数据列表上拉加载更多,下拉刷新功能

    ⭐️⭐️⭐️   作者: 船长在船上 🚩🚩🚩   主页: 来访地址船长在船上的博客 🔨🔨🔨   简介: CSDN前端领域优质创作者,资深前端开发工程师,专注前端开发,在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享,欢迎咨询交流,共同学习。 🔔🔔🔔

    2023年04月12日
    浏览(43)
  • 【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面,安卓软键盘遮挡问题

    使用Vue+Vant做的移动端项目,在登录界面使用Vant的表单组件van-input时发现在真机测试IOS会出现获取焦点输入时会撑大原页面的宽度,每一个输入框获取到焦点就会页面就会放大一点点,需要双指缩放才能回到原来的比例。 经过一番百度后发现: 在移动端开发项目中,发现页

    2024年02月12日
    浏览(69)
  • 【前端】vant组件移动端兼容性问题汇总

    记录使用vant组件开发过程中遇到的兼容性问题 问题截图: 解决方法: 模拟滚动触发日历组件的加载,在van-calendar上绑定@open=\\\"openCalendar\\\"事件 参考来源:vant 日历插件,部分全面屏手机显示不出来 解决方法: 更改挂载节点,在van-popup上加get-container=“body” 参考来源:vant兼容

    2024年02月10日
    浏览(53)
  • Vue3+vite+vant UI移动端项目创建保姆级教程

    vue3 默认端口5173 想要把端口号修改为8088,在vite.config.js中写入 安装插件flexible (适配移动端) 在main.js中引入 安装 postcss-pxtorem (把px转化为rem) 安装这个之后 开发过程中就可以写px了 插件会自动转化为移动端单位rem 配置自动按需引入组件 安装插件 在vite.config.js中配置插件 适配

    2024年04月16日
    浏览(59)
  • 【记账本实战】03 集成 Vant UI 组件库

    Vant 是一个 轻量、可定制的移动端组件库 ,于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 特性 🚀 性能极佳,组件平均体积小于 1KB(min+gzip) 🚀 80+ 个高质量组件,覆盖移动端主流场景 🚀

    2024年01月16日
    浏览(36)
  • vant ui progress进度条组件样式调整

    原官方progress组件效果: 希望实现ui效果: 效果1. 效果2. 效果一html结构 组件api: pivot-text- 进度文字内容 string 百分比 这里把pivot-text的值设置为空 效果一样式代码: 效果二是文字在进度条内部 区分效果一没有用flex布局, 用了定位样式 效果二html结构 效果二样式代码:

    2024年02月13日
    浏览(48)
  • Vant UI的Sidebar侧边导航组件单独设置滚动条

    在Vue项目中使用Vant UI框架时,遇到Sidebar侧边导航组件的滚动条在整个屏幕的右侧:  需要实现的效果是:左侧导航栏有单独的滚动条,右侧主体内容也有单独的滚动条,互不干涉。  (效果是左侧和右侧都是有一个滚动条的) html部分: 重点是css部分:左侧和右侧的盒子需要

    2024年02月16日
    浏览(165)
  • vant UI 轮播组件swiper 滑动时触发click点击事件

    问题描述:  如图 我是用轮播图做了一个答题卡分页 但是 出现了 滑动轮播图时自动触发了数字点击的事件 解决办法: 1.在van-swipe标签添加 lazy-render属性,实现图片懒加载,懒加载模式下,只会渲染当前页和下一页。 2..在van-swipe标签添加 :stop-propagation=\\\"false\\\" 属性,阻止滑动

    2024年02月07日
    浏览(47)
  • vue版本升级导致vant这个UI组件中的loading失效问题

    最近遇到了一个问题,就是项目中loading加载突然不能用了。 这个项目是老项目, vue2.x+vant,loading加载 采用的是vant提供的UI组件。 但为什么不能用了呢,因为一个小伙伴把package-lock.json这个文件删除了。 为什么会把 package-lock.json 这个文件删除了呢?因为公司有安全扫描,扫

    2023年04月22日
    浏览(40)
  • 微信小程序导入Vant Weapp ui组件库2023年最新版

    写这篇文章的原因是Vant Weapp的官方文档快速上手是有一定的问题的,没错,我就是那个试错的人,弄了一下午才发现问题所在,所以写了一篇正确的导入教程。 第一步:在项目所在目录打开控制台 第二步:查看自己电脑npm的版本,如果有会有版本号显示,没有则需要去下载

    2024年02月09日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包