Vue.js 二维码生成教程 - 使用 qrcode.js 库

以下是使用 Vue.js 和 qrcode.js 库生成二维码的基本步骤：

1. 在 Vue 项目中安装 qrcode.js 库。

npm install qrcodejs2 --save

2. 在 Vue 组件中引入 qrcode.js 库。

import QRCode from 'qrcodejs2';

3. 在 Vue 组件中定义一个空的 div 元素，用于显示二维码。

<template>
  <div id='qrcode'></div>
</template>

4. 在 Vue 组件的 mounted 钩子函数中，通过调用 QRCode 库的 API 生成二维码。

mounted() {
  const qrcode = new QRCode(document.getElementById('qrcode'), {
    text: 'http://www.example.com', // 二维码内容
    width: 256, // 二维码宽度
    height: 256, // 二维码高度
  });
},

完整的 Vue 组件代码示例：

<template>
  <div id='qrcode'></div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  mounted() {
    const qrcode = new QRCode(document.getElementById('qrcode'), {
      text: 'http://www.example.com', // 二维码内容
      width: 256, // 二维码宽度
      height: 256, // 二维码高度
    });
  },
};
</script>

当页面加载时，该组件将在页面上显示一个 256x256 的二维码，其内容为 http://www.example.com。您可以将其替换为任何其他 URL 或文本，以生成自定义的二维码。