实现二维码的方式有很多种，这里介绍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, 背景图外将绘制白色边框