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

vant 按需导入 vue2

vant 按需导入 vue2

1、通过npm安装

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

2、自动按需引入组件

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D

3、在根目录创建 babel.config.js文件

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}

4、在utils下创建 vant.js文件

/*** vant 地址* https://vant-contrib.gitee.io/vant/v2/#/zh-CN/contact-card#dai-ma-yan-shi*/
import Vue from 'vue'// 引入需要的组件
import { Button, 
} from "vant";// 注册组件
Vue.use(Button);

5、在main.js中引入vant.js文件

import '@/utils/vant'

6、直接在vue文件中使用啦

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

7、最后效果

在这里插入图片描述

相关文章:

vant 按需导入 vue2

vant 按需导入 vue2 1、通过npm安装 # Vue 3 项目&#xff0c;安装最新版 Vant&#xff1a; npm i vant -S# Vue 2 项目&#xff0c;安装 Vant 2&#xff1a; npm i vantlatest-v2 -S2、自动按需引入组件 babel-plugin-import 是一款 babel 插件&#xff0c;它会在编译过程中…...

Java手写分治算法和分治算法应用拓展案例

Java手写分治算法和分治算法应用拓展案例 1. 算法思维导图 以下是用Mermanid代码表示的分治算法的实现原理&#xff1a; #mermaid-svg-nvJwIm97kPHEXQOR {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-nvJwIm97kP…...

学习 CodeWhisperer 的一些总结

目前一些常见的的 AI 工具 GitHub Copilot&#xff1a;GitHub 与 OpenAI 合作开发的一个人工智能助手。 Codeium&#xff1a;是一个免费的人工智能驱动的代码生成工具 Tabnine&#xff1a;一个自动代码生成工具&#xff0c;免费版本非常有限&#xff0c;只提供简短的代码完成…...

JavaScript 中的 `this` 指向问题与其在加密中的应用

JS中的 this 关键字是一个非常重要的概念&#xff0c;它在不同情况下会指向不同的对象或值。在本文中&#xff0c;我们将深入探讨 JavaScript 中 this 的各种情况&#xff0c;并思考如何将其应用于 JS加密中的一些有趣用途。 1. 全局上下文中的 this 在全局上下文中&#xff…...

深入理解算法的时间复杂度

文章目录 时间复杂度的定义时间复杂度的分类时间复杂度分析常见数据结构和算法的时间复杂度常见数据结构常见算法 常见排序算法说明冒泡排序(Bubble Sort)快速排序(Quick Sort)归并排序(Merge Sort)堆排序(Heap Sort) 时间复杂度的定义 时间复杂度就是一种用来描述算法在输入规…...

2023年度教育部人文社会科学研究一般项目评审结果,已公布!

【SciencePub学术】 9月15日&#xff0c;教育部社科司公示了2023年度教育部人文社会科学研究一般项目评审结果&#xff0c;共3482项。 其中&#xff0c;规划基金、青年基金、自筹经费项目共3029项通过专家评审&#xff1b;西部和边疆地区项目200项&#xff0c;新疆项目20项&a…...

十一、MySql的事务(上)

文章目录 一、引入&#xff08;一&#xff09;CURD不加控制&#xff0c;会有什么问题&#xff1f;&#xff08;二&#xff09;CURD满足什么属性&#xff0c;能解决上述问题&#xff1f; 二、什么是事务&#xff1f;三、事务的特性&#xff08;一&#xff09;原子性&#xff1a;…...

时间序列分析1--生成和导出时间序列数据

时间序列数据的生成 直接录入 1.行录入 ts.(price,startc(2015,1),frequency 12) # price为时间序列变量&#xff0c;start为起始读入时间 frequncy指定每年读入的数据的频率&#xff0c;frequncy4为季度数据、frequncy52为星期数据 2.列录入 scan() 1:101 ....6:7 7:…...

HarmonyOS应用开发—资源分类与访问

应用开发过程中&#xff0c;经常需要用到颜色、字体、间距、图片等资源&#xff0c;在不同的设备或配置中&#xff0c;这些资源的值可能不同。 应用资源&#xff1a;借助资源文件能力&#xff0c;开发者在应用中自定义资源&#xff0c;自行管理这些资源在不同的设备或配置中的表…...

C++中的转换构造函数

在 C/C++ 中,不同的数据类型之间可以相互转换。无需用户指明如何转换的称为自动类型转换(隐式类型转换),需要用户显式地指明如何转换的称为强制类型转换。 自动类型转换示例: int a = 6;a = 7.5 + a; 编译器对 7.5 是作为 double 类型处理的,在求解表达式时,先将 a 转换…...

JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 JSP ssm 特殊人群防走失系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源 代码和数据库&#xff0c;系统主要…...

怎么实现一个登录时需要输入验证码的功能

今天给项目换了一个登录页面&#xff0c;而这个登录页面设计了验证码&#xff0c;于是想着把这个验证码功能实现一下吧。 这篇文章就如何实现登录时的验证码的验证功能结合代码进行详细地介绍&#xff0c;以及介绍功能实现的思路。 目录 页面效果 实现思路 生成验证码的控制…...

在android工程中新建Android模块报错

复制了复制正常的build.gradle文件&#xff0c;然后把theme里面的东西改成了下面这个样就好了 <resources xmlns:tools"http://schemas.android.com/tools"><!-- Base application theme. --><style name"Theme.JiQuan" parent"Theme…...

电脑桌面的复选框如何取消

电脑桌面图标的复选框如何取消 1. 概述2. 去掉图标的复选框方法结束语 1. 概述 当你拿到新的电脑开机后&#xff0c;发现桌面上软件应用的图标左上角有个小框&#xff0c;每次点击图标都会显示&#xff0c;并且点击图标时&#xff0c;小框还会打上√&#xff1b; 这个小框的…...

【Unity每日一记】资源加载相关和检测相关

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…...

【数据结构】长篇详解堆,堆的向上/向下调整算法,堆排序及TopK问题

文章目录 堆的概念性质图解 向上调整算法算法分析代码整体实现 向下调整算法算法分析整体代码实现 堆的接口实现初始化堆销毁堆插入元素删除元素打印元素判断是否为空取首元素实现堆 堆排序创建堆调整堆整合步骤 TopK问题 堆的概念 堆就是将一组数据所有元素按完全二叉树的顺序…...

DAQ高频量化平台:引领Ai高频量化交易模式变革

近年来&#xff0c;数字货币投资市场掀起了一股热潮&#xff0c;以&#xff08;BTC&#xff09;为代表的区块链技术带来了巨大的商业变革。数字资产的特点&#xff0c;如无国界、无阶级、无门槛、高流动性和高透明度&#xff0c;吸引了越来越多的人们的关注和认可&#xff0c;创…...

vue3 element plus获取el-cascader级联选择器选中的当前结点的label值 附vue2获取当前label

各位大佬&#xff0c;有时我们在处理级联选择组件数据时&#xff0c;不仅需要拿到id,还需要拿到label名称&#xff0c;但是通常组件直接绑定的是id,所以就需要我们用别的方法去拿到label,此处官方是有这个方法的&#xff0c;具体根据不同的element 版本进行分别处理。 VUE3 e…...

Spring Boot常见面试题

Spring Boot简介 Spring Boot 是由 Pivotal 团队提供&#xff0c;用来简化 Spring 应用创建、开发、部署的框架。它提供了丰富的Spring模块化支持&#xff0c;可以帮助开发者更轻松快捷地构建出企业级应用。Spring Boot通过自动配置功能&#xff0c;降低了复杂性&#xff0c;同…...

分块矩阵求逆

另可参考Block matrix on Wikipedia2018.4.3 补充补充两个参考文献&#xff0c;都是对工科很实用的矩阵手册&#xff1a;D. S. Bernstein, Matrix mathematics: Theory, facts, and formulas with application to linear systems theory. Princeton, NJ: Princeton University …...

SEO_掌握这5个SEO技巧,让流量持续增长

SEO技巧&#xff1a;让你的网站流量持续增长的5个关键策略 在当今数字化时代&#xff0c;网站流量的稳定增长对于企业的成功至关重要。搜索引擎优化&#xff08;SEO&#xff09;是提高网站流量的核心手段之一。掌握一些关键的SEO技巧&#xff0c;不仅可以帮助你在搜索结果中获…...

人到中年,生日收到这三条短信,我读了很久

手机屏幕亮了一下。 我拿起来&#xff0c;以为是工作消息&#xff0c;结果是中国工商银行的短信&#xff1a; 紧接着&#xff0c;第二条进来了——中国联通&#xff1a; 第三条&#xff0c;是母校辽工大发来的&#xff1a; 我看着这三条短信&#xff0c;愣了很久。 没有酒局的邀…...

嵌入式系统引导程序uboot原理与应用详解

1. 为什么嵌入式系统需要uboot1.1 计算机系统启动的基本原理任何计算机系统启动时都需要一个引导程序来完成硬件初始化和操作系统加载的工作。无论是PC机还是嵌入式设备&#xff0c;这个基本原理都是相通的。在PC架构中&#xff0c;这个引导程序叫做BIOS&#xff08;基本输入输…...

simia_joystick:面向心理生理实验的低延迟摇杆驱动设计

1. simia_joystick 组件深度解析&#xff1a;面向嵌入式心理生理交互系统的摇杆驱动设计1.1 组件定位与工程目标simia_joystick是专为simia embedded嵌入式平台设计的摇杆&#xff08;Joystick&#xff09;输入组件&#xff0c;其核心使命并非通用HID设备模拟&#xff0c;而是服…...

2026届最火的五大降AI率方案推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 得从语言、逻辑以及细节这三方面着手&#xff0c;来降低AI生成内容所留下的痕迹。在语言方面…...

手把手教你用WouoUI-PageVersion打造128*64 OLED炫酷UI(附Air001移植避坑指南)

嵌入式UI开发实战&#xff1a;WouoUI-PageVersion在128*64 OLED屏上的高效移植与优化 在资源受限的嵌入式设备上实现流畅的UI动画一直是个技术挑战。本文将带你深入探索如何利用WouoUI-PageVersion框架&#xff0c;在仅有4KB RAM和32KB Flash的Air001等微控制器上&#xff0c;打…...

用C++和Winsock从零搭建一个局域网聊天室(附完整代码)

用C和Winsock构建高效局域网聊天室的实战指南 在当今数字化协作环境中&#xff0c;即时通讯工具已成为团队沟通的标配。虽然市面上已有成熟的商业解决方案&#xff0c;但理解底层网络通信原理对于开发者而言至关重要。本文将带你从零开始&#xff0c;用C和Winsock API构建一个…...

利用drawio高效绘制数据库ER图:从入门到精通

1. 为什么选择drawio绘制数据库ER图 第一次接触数据库设计时&#xff0c;我被各种专业工具的价格和复杂度吓退了。直到发现drawio这个宝藏工具&#xff0c;才真正体会到什么叫"用最简单的工具做专业的事"。作为一款完全免费的跨平台工具&#xff0c;drawio不仅支持网…...

STM32F107单片机驱动Dp83848以太网芯片程序 项目开发用到了Dp83848这一个以...

STM32F107单片机驱动Dp83848以太网芯片程序 项目开发用到了Dp83848这一个以太网芯片&#xff0c;本人发现其配置起来比较麻烦&#xff0c;所以整理了一份STM32F107单片机驱动Dp83848的程序代码例程&#xff0c;方便大家学习相关代码的配置最近在项目里折腾STM32F107和DP83848这…...

claw-code 源码详细分析:子系统目录地图——几十个顶层包如何用五条轴(会话 / 工具 / 扩展 / 入口 / 桥接)读懂?

范围&#xff1a;src/ 下 顶层包&#xff08;含 */__init__.py 的目录&#xff09;与 与会话/runtime 强相关的根模块&#xff1b;与 result/01_start.md 第十三节、「清单—路由—会话」叙事一致。1. 为什么用五条轴 src/ 里同时存在&#xff1a; 大量占位包&#xff08;读 re…...