利用 Vue3 生成二维码和条形码

目录
媒介
一、前期准备
1.1. 利用Vite创建工程化项目
1.2 安装所需的依赖
 二、环境检查
三、生成二维码
3.1 创建二维码组件
3.2 在App.vue中利用二维码组件
四、生成条形码
4.1 创建条形码组件
4.2.在App.vue中利用条形码组件
五、启动测试与效果演示
5.1 启动demo
5.2 二维码演示
5.3 条形码演示

---

媒介

        在我刚打仗CSDN时,便写下了第一篇利用python库生成二维码的博文,但是随着学习的知识越来越多,实现同一个功能,但可以通过差异的方式得以实现,本篇是通过Vue3和Vue的一些组件库从而实现的一个小demo

一、前期准备

1.1. 利用Vite创建工程化项目

        这里可以在vscode或是其他的IDE,或是直接找一个符合的目录,然后在cmd中即可

1. npm create vite@latest

复制代码

        输入要创建的vue项目名,然后回车,选择Vue,然后回车,这里我的项目名是demo0-happy

选择自己想用的,不知道直接选js

 进入文件所处的目录

1. cd demo0-happy

复制代码

1.2 安装所需的依赖

起首输入npm i 也就是(npm install的缩写)

将利用qrcode库来生成二维码，利用bwip-js来生成条形码。可以通过以下下令安装它们：

1. npm install qrcode bwip-js

复制代码

 二、环境检查

        起首，请确保已经安装了Node.js和Vue CLI。如果还未安装，可以通过以下下令举行安装：

1. npm install @vue/cli

复制代码

三、生成二维码

3.1 创建二维码组件

        在src/components目录下创建QRCodeGenerator.vue文件，并添加以下代码：

1. <script setup>
2. import { ref } from 'vue';
3. import QRCode from 'qrcode';
5. const text = ref('');
6. const qrCodeUrl = ref("");
8. async function generateQRCode() {
9.   try {
10.     qrCodeUrl.value = await QRCode.toDataURL(text.value);
11.   } catch (err) {
12.     console.error(err);
13.   }
14. }
16. </script>
18. <template>
19.   <div>
20.       <h2>二维码生成器</h2>
21.       <input v-model="text" placeholder="输入文本生成二维码">
22.       <button @click="generateQRCode">生成二维码</button>
23.       <div v-if="qrCodeUrl">
24.         <img :src="qrCodeUrl" alt="二维码"/>
25.       </div>
26.     </div>
27. </template>
29. <style scoped>
31. </style>

复制代码

3.2 在App.vue中利用二维码组件

        打开src/App.vue文件，导入并利用QRCodeGenerator组件：

1. <script setup>
2. import QRCodeGenerator from './components/QRCodeGenerator.vue'
3. </script>
5. <template>
6.   <div>
7.     <QRCodeGenerator></QRCodeGenerator>
8.     <hr>
9.   </div>
10. </template>
12. <style scoped>
13. </style>

复制代码

四、生成条形码

4.1 创建条形码组件

在src/components目录下创建BarcodeGenerator.vue文件，并添加以下代码：

1. <script setup>
2. import bwipjs from 'bwip-js'
3. import { ref } from 'vue'
5. const text = ref('')
6. const barcodeCanvasRef = ref("")
8. function generateBarcode() {
9.   bwipjs.toCanvas(barcodeCanvasRef.value, {
10.     bcid: 'code128', // 条形码类型
11.     text: text.value,
12.     scale: 3, // 缩放比例
13.     height: 10, // 条形码高度
14.     includetext: true, // 是否包括文本
15.     textxalign: 'center' // 文本对齐方式
16.    
17.   })
18. }
19. </script>
21. <template>
22.   <div>
23.     <h2>条形码生成器</h2>
24.     <input v-model="text" placeholder="输入文本生成条形码" aria-label="输入文本" />
25.     <button @click="generateBarcode" aria-label="生成条形码">生成条形码</button>
26.     <canvas ref="barcodeCanvasRef"></canvas>
27.   </div>
28. </template>
30. <style scoped>
32. </style>

复制代码

4.2.在App.vue中利用条形码组件

        同样，在src/App.vue中导入并利用BarcodeGenerator组件,此时会将之前的二维码的一并导入：

1. <script setup>
2. import QRCodeGenerator from './components/QRCodeGenerator.vue'
3. import BarcodeGenerator from './components/BarcodeGenerator.vue'
5. </script>
7. <template>
8.   <div>
9.     <QRCodeGenerator></QRCodeGenerator>
10.     <hr>
11.     <BarcodeGenerator></BarcodeGenerator>
12.   </div>
13. </template>
15. <style scoped>
16. </style>

复制代码

五、启动测试与效果演示

5.1 启动demo

切换到项目的目录下,在项目的目录下启动

1. npm run dev

复制代码

将出现的url链接打开,便会出现下面的界面

 

5.2 二维码演示

        输入想要生成二维码的笔墨和信息,或是链接,然后点击生成二维码按钮即可,这里利用了utools的二维码识别截图工具(QRscan)识别如下

 
5.3 条形码演示

        这里操作的方式和上面是一样的

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。