vue-vant组件库

组件库:第三方封装好了很多很多的组件,整合到一起就是一个组件库。

官网:Vant 2 - Mobile UI Components built on Vue

vant支持vue2,也支持vue3;vant2支持vue2,vant3、vant4支持vue3

分类

vue的组件库一般会按照不同平台进行分类:

1.PC端:element-ui(element-plus)、ant-design-vue(阿里)

element-ui支持v2

element-plus支持v3

ant-design-vue支持v2、v3

2.移动端:vant-ui、Mint UI(饿了么)、Cube UI(滴滴)

重点掌握vant-ui,更新效率比较高

安装

要注意安装版本

# Vue 3 项目,安装最新版 Vant:
npm i vant -S# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
yarn add vant@latest-v2

 导入

全部导入:

在main.js中写入

import Vant from 'vant'
import 'vant/lib/index.css'Vue.use(Vant)//插件安装初始化,内部会将所有的vant组件进行导入注册

按需导入:

1.安装插件

npm i babel-plugin-import -D
或
yarn add babel-plugin-import -D

-D: 把当前插件安装成开发依赖,仅仅在开发过程当中使用

2.babel.config.js中配置

上面是低版本写法,下面是高版本写法配合脚手架的形式

  plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]

3.main.js按需导入注册

在src/utils文件夹下创建一个vant-ui.js文件

import Vue from 'vue'
import { Button } from 'vant'Vue.use(Button)

在main.js中添加

import '@/utils/vant-ui'

postcss插件实现vw适配

安装插件

yarn add postcss-px-to-viewport@1.1.1 -D

根目录新建postcss.config.js文件,填入配置

module.exports = {plugins: {'postcss-px-to-viewport': {// vw适配的标准屏的宽度 iphoneX// 设计图 750,调成1倍=>适配375标准屏幕// 设计图 640,调成1倍=>适配320标准屏幕viewportWidth: 375}}
}

vant组件

底部导航tabbar

在src/utils/ vant-ui.js中添加

import { Tabbar, TabbarItem } from 'vant';Vue.use(Tabbar);
Vue.use(TabbarItem);

把基础用法里的代码复制粘贴到页面中

icon图标

无需引入,直接使用

NavBar 导航栏

 left-arrow是左箭头

轻提示

两种使用方式

1.导入调用(组件内或非组件中均可,即.vue和.js文件下均可)

import { Toast } from 'vant'
Toast('提示内容');

2.通过this直接调用(必须组件内,只有.vue文件下可以)

this.$toast('提示文案');

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

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

相关文章

老胡的周刊(第122期)

老胡的信息周刊[1],记录这周我看到的有价值的信息,主要针对计算机领域,内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 🎯 项目 movie-web[2] 开源可自部署的简约在线电影搜…

ThreadLocal 是什么?它的实现原理是什么?

文章目录 ThreadLocal 是什么?它的实现原理是什么? ThreadLocal 是什么?它的实现原理是什么? ThreadLocal 是一种线程隔离机制,它提供了多线程环境下对于共享变量访问的安全性。 在多线程访问共享变量的场景中&#…

Android 跨进程之间通信(IPC)方式之BroadcastReceiver

Android 跨进程之间通信 Android 跨进程之间通信(IPC)方式之BroadcastReceiverAndroid 跨进程之间通信(IPC)方式之ContentProvider 文章目录 Android 跨进程之间通信前言一、关于系统广播二、如何利用BroadcastReceiver跨进程通信1.创建广播接收器2.清单文件中声明注册3.发送广…

论数据资源持有权(下)

四、数据资源持有权:数据流通体系与秩序运行的支柱 现代数字经济背景下的数据要素市场,主要是在动态的流通中实现数据财产价值,在明确数据资源持有权作为构建数据流通中的新型数据财产产权的基石后,就应该充分围绕数据资源持有权…

微信小程序开发系列-11组件间通信02

微信小程序开发系列目录 《微信小程序开发系列-01创建一个最小的小程序项目》 《微信小程序开发系列-02注册小程序》 《微信小程序开发系列-03全局配置中的“window”和“tabBar”》 《微信小程序开发系列-04获取用户图像和昵称》 《微信小程序开发系列-05登录小程序》 《…

【算法】哈希算法和哈希表

一、哈希算法 哈希算法是一种将任意长度的数据(也称为“消息”)转换为固定长度字符串(也称为“哈希值”或简称“哈希”)的数学函数或算法。这个固定长度的字符串是由输入数据通过一系列的运算得到的,并且具有一些重要…

算法通关村第二十关-白银挑战图的存储与遍历

大家好我是苏麟, 今天继续聊图 . 与前面的链表、树等相比,图的存储和遍历要复杂非常多 .所以理解就好 , 面试基本不会让写代码的 . 图的类型多、表示方式多,相关算法也很多,实现又过于复杂,多语言实现难度太大了。这些算法一般理…

C语言之scanf浅析

前言&#xff1a; 当有了变量&#xff0c;我们需要给变量输入值就可以使用scanf函数&#xff0c;如果需要将变量的值输出在屏幕上的时候可以使用printf函数&#xff0c;如&#xff1a; #include <stdio.h> int main() {int score 0;printf("请输⼊成绩:");sc…

软件工程总复习笔记

软件工程课程复习提纲 文章目录 软件工程课程复习提纲一、基本知识点1. 软件工程的概念及目标2. 软件危机的概念及典型表现3. 瀑布模型的概念及特点4. 快速原型模型的特点5. 螺旋模型的基本思想6. 软件生命周期的概念及划分为哪几个阶段7. 软件需求的定义8. 常见的软件需求获取…

Java位运算及移位运算

java中能表示整数数据类型的有byte、short、char、int、long&#xff0c;在计算机中占用的空间使用字节描述&#xff0c;1个字节使用8位二进制表示。 数据类型字节数二进制位数表示范围默认值byte18-27 – 27-10char2160 – 216-1\u0000 (代表字符为空 转成int就是0)short216-…

OpenCV-12绘制图像

OpenCV提供了许多绘制图像的API&#xff0c;可以在图像上绘制各种图形&#xff0c;例如直线&#xff0c;矩形&#xff0c;圆&#xff0c;椭圆等图形。 一、画直线 利用API line&#xff08;img, pt1, pt2, color, thickness, lineType, shift&#xff09;可以绘制直线。 其中…

玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 代码下载(1)

本文主要参考&#xff1a; BQ3588C_代码下载 1. 安装依赖工具 安装命令如下&#xff1a; sudo apt-get update && sudo apt-get install binutils git git-lfs gnupg flexbison gperf build-essential zip curl zlib1g-dev gcc-multilib g-multiliblibc6-dev-i386 l…

【编译原理】期末预习做题向I

新的一年希望可以成为更好的人嘿嘿&#xff01; 这一篇基本就是把 up 讲的题都截了一遍然后加了点自己的笔记啥的 O.o &#xff08;不妥的话会删掉的 qwq&#xff0c;希望没事嘿嘿&#xff09; 来源&#xff1a;混子速成 I. 绪论 记住组成部分 II. 前后无关文法和语言 1.…

Python从入门到网络爬虫、自动化

可以创建C、C#、Python、Golang、Java、React、Node、Vue、PHP项目 创建Java项目 创建Python项目 简单if……else……语句 # 简单的if……else……语句 state True if state:print("状态正常") else:print("状态异常")# 复杂的if……elif……语句 score …

一骑绝尘!维乐携手骑行侠客轻风逆旅带你解锁冬日逆旅

是逆风冬旅还是冻旅&#xff1f;冬日似乎都被骑友们默认做事应该闭关闭的时间了&#xff0c;空气中萧瑟的寒风仿佛是穿透我们的骨膜&#xff0c;当我还在路上瑟瑟发抖的时候&#xff0c;此时一位公路骑行侠正在开启他的冬日旅途~      以下是来自他的自诉&#xff1a;   …

saas 多租户系统数据隔离方案

关注WX公众号&#xff1a; commindtech77&#xff0c; 获得数据资产相关白皮书下载地址 1. 回复关键字&#xff1a;数据资源入表白皮书 下载 《2023数据资源入表白皮书》 2. 回复关键字&#xff1a;光大银行 下载 光大银行-《商业银行数据资产会计核算研究报告》 3. 回复关键字…

【STM32F103】SysTick系统定时器延时函数

SysTick SysTick是Cortex-M3内核中的一个外设&#xff0c;内嵌在NVIC中&#xff0c;叫系统定时器。 当处理器在调试期间被喊停时&#xff0c;SysTick也将暂停运作。 一共有四个寄存器&#xff0c;不过我们通常用前三个&#xff0c;不需要校准。下图出自《STM32F10xxx Cortex…

关于SIC 的Know-how

SiC的分类和用途 根据电阻率不同&#xff0c;SiC衬底晶片可分为导电型和半绝缘型。 SiC衬底晶片主要用来做成高压功率器件和高频功率器件。其中&#xff0c;导电型SiC衬底晶片经过SiC外延后&#xff08;SiC基SiC外延片&#xff09;&#xff0c;主要应用于制造耐高温、耐高压的…

72内网安全-域横向CSMSF联动及应急响应知识

拿到才行&#xff0c;拿不到就是多余的 案例一MSF&CobaltStrike 联动 Shell 有一些功能可能cs或者msf强大一些&#xff0c;他们两个可以相互调用&#xff0c;在真实情况下也是可以cs和msf同时启动的&#xff0c; cs移交给msf .创建Foreign监听器 “Listeners”“Add”…

蓝桥杯一维差分 | 算法基础

⭐简单说两句⭐ ✨ 正在努力的小新~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &…