vue3项目生成二维码

要在 Vue 3 项目中生成二维码，你可以使用 `qrcode` 库。以下是使用 `qrcode` 库在 Vue 3 中生成二维码的步骤：

1. 首先，通过 npm 或 yarn 安装 `qrcode` 库。

npm install qrcode
# 或
yarn add qrcode

2. 在需要生成二维码的组件中，引入 `qrcode` 库。

import QRCode from 'qrcode';

3. 在组件的 `data` 中定义一个变量来存储生成的二维码图片的 URL。

export default {
  data() {
    return {
      qrCodeUrl: ''
    };
  },
  // ...
}

4. 在组件的 `mounted` 钩子函数中，使用 `qrcode` 库生成二维码，并将生成的二维码图片的 URL 赋值给 `qrCodeUrl` 变量。

export default {
  // ...
  mounted() {
    const qrCodeData = 'https://example.com'; // 设置二维码包含的数据
    const options = {
      width: 200, // 设置二维码宽度
      height: 200, // 设置二维码高度
    };
    
    QRCode.toDataURL(qrCodeData, options)
      .then(url => {
        this.qrCodeUrl = url;
      })
      .catch(err => {
        console.error(err);
      });
  }
}

5. 在模板中使用 `qrCodeUrl` 变量来显示生成的二维码。

<template>
  <div>
    <img :src="qrCodeUrl" alt="QR Code">
  </div>
</template>

这样，当组件被挂载时，就会生成并显示二维码图片。请确保将 `https://example.com` 替换为你想要生成二维码的实际数据。还可以根据需要调整二维码的宽度和高度。