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

在 Vue 2 中使用 qrcode 库生成二维码

news 来源：原创 2025/8/14 1:00:33

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在 Vue 2 中使用 qrcode 库生成二维码

在 Vue 2 中使用 qrcode 库生成二维码
- 1. 安装 qrcode 库
- 2. 创建二维码组件
- - QrCode.vue
  - 代码说明
- 3. 在主应用中使用二维码组件
- - App.vue
  - 代码说明
- 4. 启动项目
- 5. 配置选项

在 Vue 2 中使用 qrcode 库生成二维码

在现代的前端开发中，二维码生成是一个常见的需求，尤其是在需要快速分享信息（如网址、文本等）的场景中。Vue 2 是一个流行的前端框架，而 qrcode 是一个强大的库，可以帮助我们在 Vue 2 项目中轻松生成二维码。本文将详细介绍如何在 Vue 2 项目中使用 qrcode 库生成二维码，并展示一个简单的示例。

1. 安装 qrcode 库

首先，确保你已经安装了 Vue CLI。如果尚未安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

接下来，使用 Vue CLI 创建一个新的 Vue 项目：

vue create vue-qrcode-example

在创建过程中，你可以选择默认配置，或者根据需要进行自定义配置。创建完成后，进入项目目录：

cd vue-qrcode-example

然后，安装 qrcode 库：

npm install qrcode

2. 创建二维码组件

在 src/components 目录下创建一个名为 QrCode.vue 的文件，用于封装二维码生成的逻辑。以下是 QrCode.vue 的代码示例：

QrCode.vue

<template><div><canvas ref="qrCanvas"></canvas></div>
</template><script>
import QRCode from 'qrcode';export default {name: 'QrCode',props: {text: {type: String,required: true},size: {type: Number,default: 200}},mounted() {this.generateQrCode();},methods: {generateQrCode() {QRCode.toCanvas(this.$refs.qrCanvas, this.text, { width: this.size }, (err) => {if (err) {console.error('生成二维码失败：', err);}});}}
};
</script>

代码说明

props：
- text：要编码到二维码中的字符串，这是一个必填属性。
- size：二维码的宽度和高度，默认值为 200。
mounted 钩子：
- 在组件挂载完成后，调用 generateQrCode 方法生成二维码。
generateQrCode 方法：
- 使用 qrcode 库的 toCanvas 方法将二维码渲染到 <canvas> 元素中。
- 通过 this.$refs.qrCanvas 获取 <canvas> 元素的引用。
- 设置二维码的宽度为 size 属性的值。

3. 在主应用中使用二维码组件

在 src/App.vue 文件中引入并使用 QrCode 组件：

App.vue

<template><div id="app"><h1>Vue 2 二维码生成示例</h1><QrCode :text="url" :size="300" /></div>
</template><script>
import QrCode from './components/QrCode.vue';export default {name: 'App',components: {QrCode},data() {return {url: 'https://www.example.com'};}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

代码说明

QrCode 组件：
- 通过 :text="url" 将要生成二维码的文本传递给 QrCode 组件。
- 通过 :size="300" 设置二维码的大小为 300px。
data：
- url：要生成二维码的文本内容。

4. 启动项目

在项目根目录下运行以下命令启动项目：

npm run serve

打开浏览器访问 http://localhost:8080，你将看到一个二维码，其内容为 https://www.example.com。

5. 配置选项

qrcode 库提供了丰富的配置选项，例如：

text：要编码到二维码中的字符串。
width 和 height：二维码的宽度和高度。
colorDark 和 colorLight：二维码的暗部和亮部颜色。
correctLevel：二维码的纠错级别。

例如，可以在 generateQrCode 方法中添加更多配置：

generateQrCode() {QRCode.toCanvas(this.$refs.qrCanvas, this.text, {width: this.size,color: {dark: '#000000', // 暗部颜色light: '#ffffff' // 亮部颜色},errorCorrectionLevel: 'H' // 纠错级别}, (err) => {if (err) {console.error('生成二维码失败：', err);}});
}

在这里插入图片描述

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

在 Vue 2 中使用 qrcode 库生成二维码

🌟 前言欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…...

编程日记 2025/8/14 1:00:33

在 Ubuntu 系统中，挂起（Suspend）和休眠（Hibernate）

在 Ubuntu 系统中，挂起（Suspend）和休眠（Hibernate）是两种常见的电源管理模式。以下是相关命令及说明： --- ### **1. 挂起（Suspend）** 挂起会将当前系统状态保存到内存中&#xff0…...

编程日记 2025/8/12 8:36:37

什么是声明式UI什么是命令式UI？鸿蒙ArkTS为什么是声明式UI-优雅草卓伊凡

什么是声明式UI什么是命令式UI？鸿蒙ArkTS为什么是声明式UI-优雅草卓伊凡一、UI编程范式的根本分野在软件开发领域，用户界面(UI)构建方式经历了三次重大范式转换。作为优雅草科技CTO，卓伊凡在多个操作系统开发实践中发现，UI框架…...

编程日记 2025/6/29 4:33:19

nRF Connect SDK system off模式介绍

目录概述 1. 软硬件环境 1.1 软件开发环境 1.2 硬件环境 2 System Off 模式 2.1 模式介绍 2.2 注意事项 3 功能实现 3.1 框架结构介绍 3.2 代码介绍 4 功能验证 4.1 编译和下载代码 4.2 测试 4.3 使能CONFIG_APP_USE_RETAINED_MEM的测试 5 main.c的源代码文件…...

编程日记 2025/8/12 13:33:32

node.js 实战——餐厅静态主页编写（express+node+ejs+bootstrap）

ejs页面 <!DOCTYPE html> <html> <head><title><% title %></title><link relstylesheet href/stylesheets/style.css/><link relstylesheet href/stylesheets/font-awesome.css/><link relstylesheet href/stylesheets/f…...

编程日记 2025/8/13 20:37:11

晶体布局布线

1Clock时钟电路时钟电路就是类似像时钟一样准确运动的震荡电路，任何工作都是依照时间顺序，那么产生这个时间的电路就是时钟电路，时钟电路一般是由晶体振荡器、晶振、控制芯片以及匹配电容组成 2.时钟电路布局晶体电路布局需要优先考虑&…...

编程日记 2025/6/29 3:11:55

数据结构--树

一、树的概念树是由n(n≥0)个节点组成的有限集合，它满足以下条件： 1. 当n0时，称为空树 2. 当n>0时，有且仅有一个特定的节点称为根节点(root) 3. 其余节点可分为m(m≥0)个互不相交的有限集合，每个集合本身又是一…...

编程日记 2025/6/29 4:06:36

5月7号.

flex布局: 表单标签: 表单标签-表单项:...

编程日记 2025/6/29 3:50:06

Spark 之 YarnCoarseGrainedExecutorBackend

YarnCoarseGrainedExecutorBackend executor ID ，在日志里也有体现。 25/05/06 12:41:58 INFO YarnCoarseGrainedExecutorBackend: Successfully registered with driver 25/05...

编程日记 2025/6/29 5:03:38

Webug4.0靶场通关笔记19- 第24关邮箱轰炸

目录第24关邮箱轰炸 1.配置环境 2.打开靶场 3.源码分析 4.邮箱轰炸 （1）注册界面bp抓包 （2）发送到intruder （3）配置position （4）配置payload （5）开…...

编程日记 2025/6/29 3:27:40

机器学习实战：6种数据集划分方法详解与代码实现

在机器学习项目中，合理划分数据集是模型开发的关键第一步。本文将全面介绍6种常见数据格式的划分方法，并附完整Python代码示例，帮助初学者掌握这一核心技能。一、数据集划分基础函数 1. 核心函数：train_test_split from sklea…...

编程日记 2025/6/29 3:55:03

PostgreSQL 查询历史最大进程数方法

PostgreSQL 查询历史最大进程数方法 PostgreSQL 提供了多种方式来查询数据库的历史最大进程数（连接数）。以下是几种有效的方法： 一、使用统计收集器数据 1. 查看当前统计信息 SELECT max_connections, (SELECT setting FROM pg_settings …...

编程日记 2025/6/29 5:00:44

第十二节：图像处理基础-图像平滑处理 (均值滤波、高斯滤波、中值滤波)

在数字图像处理中，图像平滑（Image Smoothing）是去除噪声、改善图像质量的关键技术之一。通过滤波算法，可以有效地抑制高频噪声，但同时可能牺牲部分图像细节。本文将以均值滤波、高斯滤波和中值滤波为核心，结…...

编程日记 2025/6/29 3:12:59

Python中的global与nonlocal关键字详解

一、前言在Python编程中，变量作用域是一个非常重要的概念。对于初学者来说，经常会遇到在函数内部无法修改外部变量的问题。这时候，global和nonlocal关键字就能派上用场了。本文将详细介绍这两个关键字的用法、区别以及适用场景，…...

编程日记 2025/6/29 3:21:43

LVGL-对象 lv_obj_t

LVGL-对象 lv_obj_t **LVGL 对象核心概念总结****1. 对象与控件的关系****2. 对象的基本属性****3. 父子对象结构****4. 屏幕与图层管理****活动屏幕（Active Screen）****图层（Layers）** **5. 关键函数与操作****6. 面向对象设计的…...

编程日记 2025/6/29 2:19:26

【C/C++】ARM处理器对齐_伪共享问题

文章目录 1 什么是伪共享？2 为什么对齐？3 伪共享的实际影响4 为什么必须是 64 字节？5 其他替代方案6 验证对齐效果总结 1 什么是伪共享？ 伪共享是多线程编程中的一种性能问题，其本质是： 缓存行&#xff…...

编程日记 2025/6/29 4:17:28

【优化策略】离散化

概念离散化是算法设计中处理大数据范围时的关键技巧，它将大范围的数据映射到有较小的的离散空间中，同时保持数据的相对关系。本质：将原始数据映射到紧凑的连续整数空间数学表示：建立映射函数 f: ℝ → ℤ，满足 x…...

编程日记 2025/6/29 2:19:41

微粉助手 1.1.0 | 专为社交电商用户设计的一站式营销工具，集成了群发消息、智能加好友、清理僵尸粉等功能

微粉助手是一款专为社交电商用户设计的一站式营销工具。此会员版无需登录，去除了更新检测，并优化了启动速度。它集成了群发消息、智能添加好友、精准清理僵尸粉、自动跟圈以及短视频获客等核心功能，是企业实现社交媒体营销自动化的理想选择。…...

编程日记 2025/6/29 4:16:34

【代码优化篇】强缓存和协商缓存

强缓存和协商缓存一、强缓存与协商缓存的区别二、Vue2 前端实现强缓存（静态资源）三、Spring Boot 后端实现协商缓存（动态接口）四、测试缓存效果五、注意事项一、强缓存与协商缓存的区别强缓存：浏览器直接读取本地缓…...

编程日记 2025/6/29 2:24:39

分区器（2）

2. 设置ReduceTask 在MapReduce框架中，Reducer的数量（即ReduceTask的数量）可以通过配置参数来设置。设置方法通过配置文件： 在mapred-site.xml文件中设置mapreduce.job.reduces参数： xml <property><nam…...

编程日记 2025/8/14 1:00:32

外包团队协作效率低，如何优化

外包团队协作效率低是许多公司面临的挑战，尤其是在跨地域、跨文化和远程工作环境下。优化外包团队的协作效率需要从沟通方式、项目管理工具、文化差异及团队结构等多个方面入手。首先，明确的沟通与及时的反馈是提高团队效率的基础， 通过定期…...

编程日记 2025/6/29 2:39:21

2020年NCA CCF-C，改进灰狼算法RSMGWO+大规模函数优化，深度解析+性能实测

目录 1.摘要2.灰狼算法GWO原理3.改进策略4.结果展示5.参考文献6.代码获取7.读者交流 1.摘要灰狼优化算法（GWO）是一种新型自然启发式算法，具备较强的局部搜索能力，但在处理大规模问题时全局搜索能力较弱。本文提出了改进灰狼算法…...

编程日记 2025/8/10 20:36:43

【EasyPan】saveShare代码分析

【EasyPan】项目常见问题解答（自用&持续更新中…）汇总版保存分享文件到个人网盘代码分析一、代码结构概览该代码实现了一个将他人分享的文件保存到自己网盘的功能，主要分为三个部分： 控制器层（Controller&a…...

编程日记 2025/8/11 14:29:29

基于Django框架开发的B2C天天生鲜电商平台

天天生鲜介绍天天生鲜是一个基于Django框架开发的B2C(Business-to-Customer)电商平台，专注于生鲜食品的在线销售。该项目采用了主流的Python Web开发框架Django，结合MySQL数据库、Redis缓存等技术，实现了一个功能完整、界面友好的电商网站…...

编程日记 2025/6/29 4:50:53

[数据库之九] 数据库索引之顺序索引

1、什么是索引？ 拿到一本书，想直接跳到感兴趣的章节，而不是从头看到尾，这时需要看书的目录，上面列出章节和对应的页码，这里的目录可以看成是书的索引，如果没有索引，要查找书中某块内…...

编程日记 2025/8/12 4:09:06

使用 Celery + Redis + Eventlet 实现 Python 异步编程（Windows 环境）

一、环境搭建与依赖安装 1. 安装依赖包 pip install celery redis eventletcelery：异步任务队列框架。redis：作为消息中间件（Broker）和结果存储（Backend）。eventlet：用于 Windows 环境下的协程…...

编程日记 2025/8/9 11:18:06

Selenium Web自动化测试学习笔记（二）--八大元素定位

前置设置及代码目录结构如下，将驱动器chromedriver.exe复制粘贴到此目录下，具体环境配置参考笔记一： Selenium Web自动化测试学习笔记（一）-CSDN博客首先和笔记（一）一样导入一些包用于设置谷…...

编程日记 2025/6/29 3:56:35

如何设置飞书多维表格，可以在扣子平台上使用

扣子可以链接到飞书多维表格，但很多人不知道具体如何操作，今天给大家分享下操作流程。大家好，我是涛涛，欢迎来到我的空间。因为需要管理员审核，所以最好有管理员的手机就在旁边方便操作。 (一) 进入应用中心 https…...

编程日记 2025/6/29 4:17:32

C++初阶-string类的简单应用

目录 1.仅仅反转字母 2.字符串中第一个唯一字符 3.字符串最后一个单词的长度 4.验证回文串 5.字符串相加 6.总结 1.仅仅反转字母题目链接：https://leetcode.cn/problems/reverse-only-letters/description/ 在数据结构中我们学了一种方法叫做前后指针法&…...

编程日记 2025/6/29 4:43:37

企业数字化转型第二课：接受不完美（1/2）

一.引言先看一组中国企业数字化转型相关的数据： 战略认知层面：92%中国企业将数字化纳入战略核心（麦肯锡2023）执行困境层面：63%企业转型首年遭遇重大挫折（BCG 2024追踪）价值释放周期&#xff1…...

编程日记 2025/8/12 8:31:08

【MCP】function call与mcp若干问题整理

前言：大模型里agent 的 funcation call 是什么概念在大模型中，Agent是一个能够理解目标、进行自主规划，并利用可用工具（包括Function Call）来执行任务以达成目标的系统或程序。Function Call是大型语言模型提供的一项…...

编程日记 2025/8/11 20:25:15

QT聊天项目DAY09

1. 安装Redis 直接从老师的网盘下载链接: https://pan.baidu.com/s/1v_foHZLvBeJQMePSGnp4Ow?pwdyid3 提取码: yid3 启动Redis服务看一下，启动成功了 .\redis-server.exe .\redis.windows.conf 启动客户端看一下 2. 配置redis库，调用API 编译一下 …...

编程日记 2025/6/29 3:24:10

JAVA八股文

一、JAVA基础 1.面向对象： 面向对象编程是一种以对象为核心的编程，通过封装、继承、多态和抽象管理代码。 1.封装：将数据（属性）和行为（方法）绑定在一个对象中，隐藏内部细节&#…...

编程日记 2025/8/9 14:19:18

『深夜_MySQL』数据库操作字符集与检验规则

2.库的操作 2.1 创建数据库语法： CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [,create_specification]….]create_spcification:[DEFAULT] CHARACTER SET charset_nam[DEFAULT] COLLATE collation_name说明： 大写的表示关键字 …...

编程日记 2025/6/29 4:20:42

1688拍立淘搜索相似商品API接口概述，json数据示例参考

1688拍立淘搜索相似商品API接口概述 1688拍立淘是阿里巴巴1688平台提供的以图搜图功能，允许开发者通过上传商品图片或图片URL，快速检索1688平台上的相似商品。该接口基于图像识别技术，结合1688的海量商品库，为商家、采购商或开发…...

编程日记 2025/8/9 23:27:48

使用 Java 11 的 HttpClient 处理 RESTful Web 服务

在现代 Web 开发中，与 RESTful Web 服务交互是一项核心任务。Java 作为一种广泛使用的编程语言，提供了多种处理 HTTP 请求的方法。在 Java 11 之前，开发者通常使用 HttpURLConnection 或第三方库（如 Apache HttpClient）。然而，这些方法要么过于底层，要么需要额外依赖。J…...

编程日记 2025/6/29 3:24:00

学习笔记：黑马程序员JavaWeb开发教程(2025.3.30)

11.6 案例-文件上传-阿里云OSS-集成从程序中获取URL给前端，前端显示图片拿到URL，但是在浏览器里面是直接下载，展示可以使用html中的<image>标签 Spring环境下，不建议再去new对象，将其交给IOC容器管理&#xff…...

编程日记 2025/6/29 4:30:49

【MySQL】-- 联合查询

文章目录 1. 简介1.1 为什么要使用联合查询1.2 多表联合查询时MySQL内部是如何进行计算的 2. 内连接2.1 语法2.2 示例 3. 外连接3.1 语法3.2 示例 4. 自连接4.1 应用场景4.2 示例4.3 表连接练习 5. 子查询5.1 语法5.2 单行子查询5.3 多行子查询5.4 多列子查询5.5 在from 子句中…...

编程日记 2025/6/29 3:47:00

《C++ Templates》：有关const、引用、指针的一些函数模板实参推导的例子

1.T按值传递最简单的模板例子： template<typename T> void func(T x) {std::cout << typeid(T).name() << std::endl;x 20;cout << x; } 这种情况下，T永远不会被推导成带顶层const或引用的类型【顶层const即变量本身不能…...

编程日记 2025/8/9 21:18:40

【算法】随机快速排序和随机选择算法

文章目录 1、随机快速排序1.1 什么是随机快排1.2 随机快排的好处 2、随机选择算法前言： 快速排序就是每次划分前，通过一种方法将一个基准值的位置确定好，再进入不同的部分重复相同的工作以此确定好每个值的位置以达到有序。如果你之前并不了…...

编程日记 2025/6/29 3:17:47

si551x时钟芯片linux下调试总结

目录前言一、依赖文档、工具二、让芯片工作的流程三、以上步骤的SOC下代码实现前言本文总结调试SKYWORKS芯片厂商Si5512时钟芯片时的笔记，基于linux5.10.xxx内核，在arm64架构的SOC上验证； 一、依赖文档、工具文档名说明下载链接Si5518…...

编程日记 2025/8/10 9:21:21

5.6-DAE实现

解决问题： 随机缺失（实验室指标未检测）系统性噪声（设备测量误差）类别不平衡（健康/患病人群比例悬殊） 思路：引入可控噪声 → 重建原始数据实现步骤 (1)…...

编程日记 2025/8/10 17:51:25

MCU怎么运行深度学习模型

Gitee仓库 git clone https://gitee.com/banana-peel-x/freedom-learn.git项目场景： 解决面试时遗留的问题，面试官提了两个问题：1.单片机能跑深度学习的模型吗？ 2.为什么FreeRTOS要采用SVC去触发第一个任务，只用Pend…...

编程日记 2025/6/29 4:56:26

背单词软件开发英语app开发，超级单词表开发，河南数匠软件开发

在数字化教育浪潮席卷全球的当下，英语教育行业面临着教学模式创新与教学效率提升的双重挑战。如何借助技术力量，为学生提供更优质、更高效的英语学习体验，成为众多英语教育机构亟待解决的问题。河南数匠软件开发有限公司，作为专注…...

编程日记 2025/8/10 1:36:38

AI视觉质检的落地困境与突破路径

摘要人工智能（AI）视觉质检技术凭借其在提升效率、降低成本和优化质量控制方面的巨大潜力，正成为现代制造业转型升级的关键驱动力。然而，尽管前景广阔，AI视觉质检在实际落地过程中仍面临诸多严峻挑战，主要…...

编程日记 2025/6/29 4:31:02

检测内存条好坏有工具，推荐几款内存检测工具

检测内存条的好坏其实很重要，这直接就关系到计算机是不是能够稳定的运行，也有一部分人就会关注内存检测的工具。你应该如何来选择的，不如看一下以下的这几个。 MemTest86是一个比较受到大家喜欢的内存检测工具，会支持各种类型&…...

编程日记 2025/6/29 2:29:01

认识tomcat（了解）

启动 1. windows版本解压后，就能用，启动，是bin路径下的startup.bat , 关闭是ctrl C . 启动后，可以访问 http://127.0.0.1:8080。为什么是8080，因为如下这个配置文件部署将项目放置到webapps目录下，即…...

编程日记 2025/6/29 4:45:23

[20250507] AI边缘计算开发板行业调研报告 (2024年最新版）

[20250507] AI边缘计算开发板行业调研报告 (2024年最新版） 一、行业背景随着物联网设备激增与AI模型轻量化，边缘计算成为AI落地核心场景。AI边缘计算开发板（Edge AI Board）作为硬件载体，需满足低延迟…...

编程日记 2025/6/29 3:14:07

前端实现文件下载

目录 1.说明 2.示例--excel 3.示例--csv 1.说明在开发中经常会出现下载csv或者excel文件，可以通过后端下载，也可以通过前端下载，如果在前端页面中可以直接获取到要下载的数据，可以通过前端下载的方式，更加高效便捷…...

编程日记 2025/8/11 4:38:23

深入理解Redis缓存与数据库不一致问题及其解决方案

什么是Redis缓存数据与数据库不一致在现代应用中，Redis作为一种高速缓存系统，被广泛用于提升系统性能。Redis缓存数据与数据库不一致，指的是缓存中的数据与数据库中的数据不匹配，导致读取缓存时得到的不是最新或正确的数据。 R…...

编程日记 2025/6/29 4:31:09

在 Vue 2 中使用 qrcode 库生成二维码

在 Vue 2 中使用 qrcode 库生成二维码

1. 安装 qrcode 库

2. 创建二维码组件

QrCode.vue

代码说明

3. 在主应用中使用二维码组件

App.vue

代码说明

4. 启动项目

5. 配置选项

相关文章：