第一种写法
参考：qrcode、Vue使用QRCode插件，生成二维码
npm i qrcode --save
<template> <div id="qrCode"> <div id="code"></div> <canvas id="canvas"></canvas> </div> </template> <script> import QRCode from "qrcode"; export default { data() { return { msg: "hello vue", codes: "", }; }, components: { QRCode: QRCode, }, methods: { useqrcode() { var canvas = document.getElementById("canvas"); QRCode.toCanvas(canvas, "https://mp.csdn.net/console/article", function ( error ) { if (error) console.error(error); console.log("QRCode success!"); }); }, }, mounted() { this.useqrcode(); }, }; </script>第二种写法
参考：前端动态生成二维码 jquery.qrcode.min.js、Jquery版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="qrcode"> </div> </body> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script> <script src="../qrcode/jquery.qrcode.min.js"></script> <script> $("#qrcode").qrcode({ render: "canvas", // 渲染方式有table方式和canvas方式 width: 256, //默认宽度 height: 256, //默认高度 text: "https://www.npmjs.com/package/qs", //二维码内容 typeNumber: -1, //计算模式一般默认为-1 correctLevel: 2, //二维码纠错级别 background: "#ffffff", //背景颜色 foreground: "#000000" //二维码颜色 }); </script> </html>