实现二维码的方式有很多种，这里介绍vue项目中简单易用的。
第一步：安装插件
npm install vue-qr --save
第二步 ： 引入对应的页面
import VueQr from "vue-qr";
第三步：注册组件
components: {
VueQr
},
第四步：html页面和js页面
<vue-qr :logoSrc="config.imagePath" :text="config.value" :size="220"></vue-qr>
data() {
config: {
value: "https://www.baidu.com", //显示的值、跳转的地址
imagePath: logoCenter, //中间logo的地址
BYTE_POS: "green"
}
}
接下来介绍下vue-qr的一些常用属性：
text 欲编码的内容
size 尺寸, 长宽一致, 包含外边距
margin 二维码图像的外边距, 默认 20px
colorDark 实点的颜色（默认颜色为黑色）
colorLight 空白区的颜色
bgSrc 欲嵌入的背景图地址
gifBgSrc 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor 背景色
backgroundDimming 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc 嵌入至二维码中心的 LOGO 地址
logoMargin LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor Logo 背景色,需要设置 logo margin
logoCornerRadius LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin 若设为 true, 背景图外将绘制白色边框
