1、安装：

npm install vue-qr --save

2、导入vue项目中使用

<template>
  <vue-qr :text="config.url"  :logoSrc="config.logo+ '?cache'" :logoScale="0.3" :size="200" :margin="0" colorDark="#f67b29" colorLight="#fff"></vue-qr>
  <el-button @click="downloadImg">下载二维码</el-button>
</template>
 
<script>
import vueQr from 'vue-qr'
export default {
    components: {
        vueQr
    },
    data() {
        return {
            config: {
                url: 'https://www.baidu.com', // 扫码访问的链接地址
                logo: '' // 随便一张图片的地址也行
            }
        }
    },
    methods: {
	    downloadImg() {
	      var oQrcode = document.querySelector('#qrcode img')
	      var url = oQrcode.src
	      var a = document.createElement('a')
	      var event = new MouseEvent('click')
	      // 下载图名字
	      a.download = '二维码'
	      a.href = url // url
	      a.dispatchEvent(event) // 合成函数，执行下载
	    }
 	}
}

注：
（1）上方的logo路径本地引用，需用require引入，如： require("…/assets/logo.png")
（2）http引用logo，则要加上 '?cache ’ 是为了解决资源请求的跨域问题。具体情况展现可自行研究。

效果图：

官方vue-qr：https://www.npmjs.com/package/vue-qr

属性：
text 二维码内容
size 二维码宽高大小，因为是正方形，所以设一个参数即可
margin 默认边距20px，不喜欢的话自己设为0
colorDark 实点的颜色，注意要和colorLight一起设置才有效
colorLight 空白的颜色，注意要和colorDark一起设置才有效
bgSrc 嵌入背景图地址，没什么卵用，不建议设置
logoSrc 二维码中间的图，这个是好东西，设置一下显得专业点
logoScale 中间图的尺寸，不要设太大，太大会导致扫码失败的
dotScale 那些小点点的大小，这个也没什么好纠结的，不建议设置了