由于qrcodejs的兼容性问题，需要在vue3中引入qrcodejs2-fix才能正常生成二维码。

1、在package.json文件中添加依赖：

"dependencies": {
    ……
    "qrcodejs2-fix": "^0.0.1"
  }

2、在工程根目录执行命令：

npm install

在工程中安装相关依赖包。

3、在vue文件中导入模块qrcodejs2-fix：

import QRCode from 'qrcodejs2-fix';

4、在页面中定义二维码输出容器：

<div id="imgContainer"></div>

5、定义生成二维码函数：

const generateCode = () => {
  document.getElementById("imgContainer").innerHTML = ""; //1
  new QRCode(document.getElementById("imgContainer"), {
    text: 'https://www.baidu.com'
  });
};

包含注释“//1”行的代码是清空输出容器中的内容，避免多次点击按钮后生成多个二维码图片。

6、定义按钮调用函数生成二维码图片

<a-button type="primary" @click="generateCode">点击获取二维码</a-button>

7、QRCode参数说明

new QRCode(container, options);

图片参数包括：