当前位置：首页 > news >正文

vue2 - 22.vant 组件库

news 来源：原创 2025/7/14 18:03:31

vant 组件库

vant2下载：

npm i vant@latest-v2 --legacy-peer-deps

目标：认识第三方 Vue组件库 vant-ui

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

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

其他 Vue 组件库

目标：了解其他 Vue 组件库

Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。

一般会按照不同平台进行分类：

① PC端：

element-ui

(element-plus)

ant-design-vue

② 移动端：

vant-ui

Mint UI (饿了么)

Cube UI (滴滴)

vant 全部导入和按需导入

目标：阅读文档，掌握全部导入的基本使用

官网：vant-ui

全部导入：

① 安装 vant-ui

yarn add vant@latest-v2

② main.js 中注册

import Vant from 'vant'

import 'vant/lib/index.css'

// 把vant中所有的组件都导入了

Vue.use(Vant)

③ 使用测试

van-button type="primary">主要按钮van-button>

van-button type="info">信息按钮van-button>

目标：阅读文档，掌握按需导入的基本使用

按需导入：

① 安装 vant-ui (已安装)

② 安装插件

③ babel.config.js 中配置

yarn add vant@latest-v2npm i babel-plugin-import -Dmodule.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]}

④ main.js 按需导入注册

⑤ 测试使用

⑥ 提取到 vant-ui.js 中，main.js 导入

import Vue from 'vue';import { Button } from 'vant';Vue.use(Button);van-button type="primary">主要按钮van-button>van-button type="info">信息按钮van-button>// 导入按需导入的配置文件import '@/utils/vant-ui'

vue2 - 22.vant 组件库

vant 组件库 vant2下载： npm i vantlatest-v2 --legacy-peer-deps 目标：认识第三方 Vue组件库 vant-ui 组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。 https://vant-contrib.gitee.io/vant/v2/#/zh-CN…...

编程日记 2025/7/14 18:03:31

Git简单介绍

一、 Git介绍与安装 1.1 Git简介 Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。 1.2集中式(SVN） VS 分布式(git) 集中式版本控制系统，版本库是集中存放在中央服务器的，工作时要先从中央…...

编程日记 2025/7/14 16:38:32

【ArcGIS Pro实操第11期】经纬度数据转化成平面坐标数据

经纬度数据转化成平面坐标数据数据准备ArcGIS操作步骤-投影转换为 Sinusoidal1 投影2 计算几何Python 示例另：Sinusoidal (World) 和 Sinusoidal (Sphere) 的主要区别参考数据准备数据投影： 目标投影：与MODIS数据相同（Sinu…...

编程日记 2025/7/14 16:05:36

六大排序算法：插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序

本章讲述数据结构中的六大排序算法欢迎大佬们踊跃讨论，感谢大家支持！ 我的博客主页链接六大排序算法一.插入排序1.1 直接插入排序1.2 希尔排序二.选择排序2.1 单向选择排序2.2双向选择排序2.3 堆排序三.交换排序3.1 冒泡排序3.2 快速排序3.2.1 Hoa…...

编程日记 2025/7/14 16:41:27

量化交易系统开发-实时行情自动化交易-4.4.1.做市策略实现

19年创业做过一年的量化交易但没有成功，作为交易系统的开发人员积累了一些经验，最近想重新研究交易系统，一边整理一边写出来一些思考供大家参考，也希望跟做量化的朋友有更多的交流和合作。接下来继续说说做市策略实现。做市策…...

编程日记 2025/7/14 16:46:45

Unity类银河战士恶魔城学习总结（P149 Screen Fade淡入淡出菜单）

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址：https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了进入游戏和死亡之后的淡入淡出动画效果 UI_FadeScreen.cs 1. Animator 组件的引用 (anim) 该脚本通过 Animator 控制 UI 元…...

编程日记 2025/7/14 17:47:32

线上＋线下≠新零售，6大互通诠释新零售的核心要点-亿发

新零售，这个词汇在近年来频繁出现在我们的视野中，它不仅仅是线上与线下的简单相加，而是一场深刻的商业变革。本文将通过6大互通的核心要点，为您揭示新零售的真正内涵。 1. 商品的互联互通新零售模式下，商品的互联互…...

编程日记 2025/7/14 16:14:08

渗透测试学习笔记（一）渗透测试方法论

一.渗透测试方法论渗透测试方法论是制定实施信息安全审计方案时，需要遵循的规则，惯例和过程。人们在评估网络，应用，系统或者三者组合的安全状态时，不断摸索各种实务的理念和成熟的做法，并总结了一套理论-…...

编程日记 2025/7/14 17:24:17

国外媒体发布新闻稿/海外媒体网站发稿创历史新潮流

国外媒体发布新闻稿/海外媒体网站发稿创历史新潮流外媒发稿谷歌 SEO 优化经典案例冲出媒体宣发新高潮在当今数字化的时代，媒体宣发的重要性日益凸显。无论是企业品牌推广、产品发布，还是个人形象塑造，有效的媒体宣发都能带来巨大的影响力和…...

编程日记 2025/7/14 17:39:31

Three.js渲染较大的模型之解决方案

文章目录 Three.js渲染较大的模型解决方案视锥体剔除实例和遮挡剔除实例视锥体剔除（Frustum Culling）实例原理概述代码示例解释遮挡剔除（Occlusion Culling）实例原理概述代码示例解释 three.js 模型压缩 Three.js渲染较大的模…...

编程日记 2025/7/14 16:31:33

使用 webpack dev serve 启动 react 项目后，发现无法使用 http://localhost:8080/1.png 访问到项目的 /static 目录下的 1.png 文件。我的 webpack-dev.js 配置如下： const webpack require(webpack) const webpackMerge require(webpack-merge) cons…...

编程日记 2025/7/13 18:25:58

Day 25

491.递增子序列力扣题目链接(opens new window) 给定一个整型数组, 你的任务是找到所有该数组的递增子序列，递增子序列的长度至少是2。示例: 输入: [4, 6, 7, 7]输出: [[4, 6], [4, 7], [4, 6, 7], [4, 6, 7, 7], [6, 7], [6, 7, 7], [7,7], [4,7,7]] 说明: …...

编程日记 2025/7/14 12:38:23

【金猿案例展】无锡征信——百望云绿色金融数据要素+数据资产入表服务方案...

‍ 百望云数据要素案例该数据要素项目案例由百望云投递并参与“数据猿年度金猿策划活动——2024数据要素产业年度创新服务企业榜单/奖项”评选。大数据产业创新服务媒体 ——聚焦数据改变商业在数字化浪潮奔涌的时代，数据要素已成为驱动经济发展的关键引擎&…...

编程日记 2025/7/14 17:12:22

【C++】C++新增特性解析：Lambda表达式、包装器与绑定的应用

V可变参数模板与emplace系列 C语法相关知识点可以通过点击以下链接进行学习一起加油！命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现…...

编程日记 2025/7/14 5:12:00

python学opencv|读取图像

【1】引言前序学习了使用matplotlib模块进行画图，今天开始我们逐步尝试探索使用opencv来处理图片。【2】学习资源官网的学习链接如下： OpenCV: Getting Started with Images 不过读起来是英文版，可能略有难度，所以另推荐一…...

编程日记 2025/7/13 19:12:05

租辆酷车小程序开发（二）—— 接入微服务GRPC

vscode中golang的配置设置依赖管理 go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct GO111MODULEauto 在$GOPATH/src 外面且根目录有go.mod 文件时，开启模块支持 GO111MODULEoff 无模块支持，go会从GOPATH 和 vendor 文件夹寻找包…...

编程日记 2025/7/14 16:48:31

leetcode 208. 实现 Trie (前缀树)

Trie（发音类似 "try"）或者说前缀树是一种树形数据结构，用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景，例如自动补全和拼写检查。请你实现 Trie 类： Trie() 初始化前缀树对象…...

编程日记 2025/7/14 1:30:09

kafka进阶_3.消费消息

文章目录一、消费消息概览1.1、消费示例代码1.2、消费过程二、消费者组2.1、push & pull2.2、消费者组三、调度器Coordinator四、消费者分配策略4.1、引言4.2、分配基本流程4.3、分配策略4.3.1、轮询分配策略4.3.2、轮询分配策略五、消费偏移量5.1、起始偏移量5.2、指定…...

编程日记 2025/7/14 8:52:10

预测未来 | MATLAB实现Transformer时间序列预测未来

预测未来 | MATLAB实现Transformer时间序列预测未来预测效果基本介绍 1.Matlab实现Transformer时间序列预测未来； 2.运行环境Matlab2023b及以上，data为数据集，单变量时间序列预测； 3.递归预测未来数据，可以控制预…...

编程日记 2025/7/14 16:52:30

VirtualBox7.0.6安装配置

VirtualBox7.0.6安装配置提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加文章目录 VirtualBox7.0.6安装配置1.安装虚拟机1.1安装虚拟机的必要条件1.1.1开启虚拟化1.1.1.1检查虚拟化是否开启1.1.1.2 开启虚拟化 1.2 安装虚拟机1.1创建…...

编程日记 2025/7/14 17:22:36

Spring Boot英语知识分享网站：技术与实践

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。是基于SQL的客户/服务器模式的关系数据库管理系统，它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等，非常…...

编程日记 2025/7/14 16:58:50

HarmonyOS4+NEXT星河版入门与项目实战（22）------动画（属性动画与显示动画）

文章目录 1、属性动画图解2、案例实现-小鱼移动游戏1、代码实现2、代码解释3、资源图片4、实现效果3、显示动画4、案例修改-显示动画5、总结1、属性动画图解这里我们用一张完整的图来汇整属性动画的用法格式和使用的主要属性范围，如下所示： 2、案例实现-小鱼移动游戏 1、代…...

编程日记 2025/7/14 16:11:38

AI赋能公共服务转型升级 | 第十届中国行业互联网大会暨腾讯云TVP行业大使三周年庆典公共服务专场圆满举办！

引言党的二十大报告把“基本公共服务实现均等化”作为 2035 年我国发展的总体目标之一，强调要“健全基本公共服务体系，提高公共服务水平”。AI 作为新质生产力的核心驱动力之一，正在公共服务领域发挥着越来越重要的作用。 2024 年 10 月 2…...

编程日记 2025/7/14 6:28:46

网络基础 - 地址篇

一、IP 地址 IP 协议有两个版本，IPv4 和 IPv6IP 地址(IPv4 地址)是一个 4 字节，32 位的正整数，通常使用 “点分十进制” 的字符串进行表示，例如 192.168.0.1，用点分割的每一个数字表示一个字节，范围是 0 ~…...

编程日记 2025/7/14 16:16:18

chrome允许http网站打开摄像头和麦克风

第一步 chrome://flags/#unsafely-treat-insecure-origin-as-secure 第二步填入网址，点击启用第三步重启 Chrome：设置完成后，点击页面底部的 “Relaunch” 按钮，重新启动 Chrome 浏览器，使更改生效。...

编程日记 2025/7/3 14:04:02

uniapp前端开发,基于vue3,element plus组件库,以及axios通讯

简介 UniApp 是一个基于 Vue.js 的跨平台开发框架，旨在通过一次开发、编译后运行在多个平台上，如 iOS、Android、H5、以及小程序（微信小程序、支付宝小程序、百度小程序等）等。UniApp 为开发者提供了统一的开发体验，使…...

编程日记 2025/7/10 12:19:08

STM32-- 串口发送数据

while(USART_GetFlagStatus(USART2,USART_FLAG_TXE)RESET);？？ 答： 这行代码： while(USART_GetFlagStatus(USART2, USART_FLAG_TXE) RESET);的作用是等待串口 USART2 的发送数据寄存器（TXE，Transmit Dat…...

编程日记 2025/7/14 5:41:42

网络安全提示

如果您是企业主或 IT 经理，您应该知道计算机安全的重要性。从保护密码安全的基础知识到网络钓鱼、恶意软件等的危险，本文将为您提供您需要了解的有关网络安全的信息。每年，互联网都变得越来越大，这意味着我们为黑客和网络犯罪分…...

编程日记 2025/7/10 13:50:08

【计算机网络】多路转接之epoll

epoll也是一种linux中的多路转接方案(epoll也是只负责IO过程中的"等") 一、epoll相关接口的使用 1.epoll_create int epoll_create(int size); 功能：创建一个epoll模型 ① int size：没意义了 >0就行返回值：返回一个文件…...

编程日记 2025/7/8 7:45:26

nextjs+nestjs+prisma写todolist全栈项目

技术栈 nextjsnestjsprisma所学知识 Nextjs组件渲染，状态，路由docker启动Mysql容器prisma操作Mysql（CRUD）允许跨域请求APITanStack Query异步状态管理fetch api服务器组件预请求数据nestjs 管道和异常处理检测id是否正整数Docker启动Mysql容器 compose.yml name: todoLis…...

编程日记 2025/7/8 22:12:50

重构代码之将双向关联改为单向关联

在代码重构中，双向关联改为单向关联是指将原本双向关联转变为单向关联。这种重构方式有助于简化对象模型和提高代码的可维护性，减少不必要的耦合。下面是对这个重构技巧的详细讲解。一、为什么需要将双向关联改为单向关联？ 减少耦合&#…...

编程日记 2025/7/14 7:52:35

Linux介绍与安装指南：从入门到精通

1. Linux简介 1.1 什么是Linux？ Linux是一种基于Unix的操作系统，由Linus Torvalds于1991年首次发布。Linux的核心（Kernel）是开源的，允许任何人自由使用、修改和分发。Linux操作系统通常包括Linux内核、GNU工具集、图…...

编程日记 2025/7/13 8:42:08

深度学习中的正则化模型是什么意思？

一、定义在深度学习中，正则化是一种用于防止过拟合的技术。过拟合是指模型在训练数据上表现非常好，但在新的、未见过的数据（测试数据）上表现很差的情况。正则化模型就是通过在损失函数中添加额外的项来约束模型的复杂度&#xf…...

编程日记 2025/7/12 16:28:01

rabbitMq两种消费应答失败处理方式

在rabbitMq消费端，有三种应答模式： none：不处理。即消息投递给消费者后立刻 ack 消息会立刻从MQ删除。非常不安全，不建议使用 manual：手动模式。需要自己在业务代码中调用api，发送 ack 或 reject&#xff…...

编程日记 2025/7/8 16:47:39

windows C#-使用反射访问特性

你可以定义自定义特性并将其放入源代码中这一事实，在没有检索该信息并对其进行操作的方法的情况下将没有任何价值。通过使用反射，可以检索通过自定义特性定义的信息。主要方法是 GetCustomAttributes，它返回对象数组，这些对象在…...

编程日记 2025/7/14 8:40:30

java中链表的数据结构的理解

在 Java 中，链表是一种常见的数据结构，可以通过类的方式实现自定义链表。以下是关于 Java 中链表的数据结构和实现方式的详细介绍。 1. 自定义链表结构 Java 中链表通常由一个节点类 (ListNode) 和可能的链表操作类构成。节点类 (ListNode) 这是链表…...

编程日记 2025/7/11 13:54:47

ctfshow

1,web153 大小写绕过失败使用.user.ini 来构造后⻔ php.ini是php的⼀个全局配置⽂件，对整个web服务起作⽤；⽽.user.ini和.htaccess⼀样是⽬录的配置⽂件，.user.ini就是⽤户⾃定义的⼀个php.ini，我们可以利⽤这个⽂件来构造后⻔和…...

编程日记 2025/7/5 23:15:07

【AI绘画】Midjourney进阶：色调详解（下）

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 💯前言💯Midjourney中的色彩控制为什么要控制色彩？为什么要在Midjourney中控制色彩？ 💯色调纯色调灰色调暗色调 &#x1f4af…...

编程日记 2025/7/9 23:35:37

lanqiaoOJ 3747：繁忙的精神疗养院 ← STL queue

【题目来源】https://www.lanqiao.cn/problems/3747/learning/【题目描述】心灵之园是一家知名的精神疗养院，为了提供更优质的服务，他们专门设立了一个 VIP 诊室和一个普通诊室。VIP 诊室主要接待特殊需求的高级会员，而普通诊室则服务所有的…...

编程日记 2025/7/12 23:30:16

Local Changes不展示，DevEco Studio的git窗口中没有Local Changes

DevEco Studio的git窗口中，没有Local Changes，怎么设置可以调出？ 进入File-->Settings-->Version Control，将Use non-modal commit interface前的勾选框取消勾选，点击OK即可在打开git窗口，就可以看到…...

编程日记 2025/7/10 12:13:50

探索Python项目模板化的新纪元 —— Copier库揭秘

文章目录 **探索Python项目模板化的新纪元 —— Copier库揭秘**1. 背景介绍：为何Copier成为Python开发者的新宠？2. Copier究竟是什么？3. 如何安装Copier？4. 简单库函数使用方法创建模板从Git URL创建项目使用快捷方式动态文件生成…...

编程日记 2025/7/10 5:33:51

导入100道注会cpa题的方法，导入试题，自己刷题

一、问题描述复习备考的小伙伴们，往往希望能够利用零碎的时间和手上的试题，来复习和备考用一个能够导入自己试题的刷题工具，既能加强练习又能利用好零碎时间，是一个不错的解决方案目前市面上刷题工具存下这些问题 1、要收费…...

编程日记 2025/7/10 2:14:15

使用NAS开启无纸化办公，Docker部署开源文档管理系统『Paperless-ngx』

使用NAS开启无纸化办公，Docker部署开源文档管理系统『Paperless-ngx』哈喽小伙伴们好，我是Stark-C~ 对于文案类的办公场景来说，手头堆放最多的可能就是各种文档文件，以及各种用过的打印废纸。这么多年来，不管是领…...

编程日记 2025/7/9 22:58:04

docker安装mysql

1.拉取mysql镜像 docker pull mysql:5.7 2.启动mysql容器 docker run -d -e MYSQL_ROOT_PASSWORD123456 -e MYSQL_TCP_PORT3307 -p 3307:3307 -v /SDXL/wjz/docker_mysql_log:/var/log/mysql -v /SDXL/wjz/docker_mysql_data:/var/lib/mysql -v /SDXL/wjz/docker_mysql_conf:/e…...

编程日记 2025/7/10 0:54:53

vant 组件库

vant2下载：

其他 Vue 组件库

vant 全部导入 和 按需导入

全部导入：

按需导入：

相关文章：

vant 全部导入和按需导入