前言：
目前總結的二維碼方法有三種，兩種是不帶logo,1、是 qrcode，2、是 qrcodejs2 ，3、是用 vue-qr（帶logo）
一、不帶logo的兩種用法
實現效果：
步驟（qrcode ）：
1、安裝：
cnpm install qrcodejs2 --save
2、調用：
import QRCode from 'qrcode' js中調用
<canvas ref="qrCode" id='qrCode'></canvas> template中添加容器
3、methods中寫方法
useqrcode(){
var canvas = document.getElementById('qrCode');
// var canvas = this.$refs.qrcode;
let content = this.person.id==undefined?'':this.person.id+'@1';//二維碼內容，如果是地址會跳轉過去
QRCode.toCanvas(canvas, content, function (error) {
if (error){
console.error(error)
}else{
console.log('QRCode success!');
}
})
},
4、mounted中調用（注意，不能再created中調用）
mounted() {
this.useqrcode();//渲染二維碼
},
步驟（qrcodejs2 ）：
1、安裝：
cnpm install qrcodejs2 --save
2、調用：
import QRCode from 'qrcodejs2' js中調用
<div ref="qrCodeDiv" ></div> template中添加容器
***注意，這裏和qrcode的區別就是容器的區別，
3、methods中寫方法
/**
* 初始化繪製二維碼
* */
useqrcode(){
var canvas = this.$refs.qrCodeDiv;
// var canvas = document.getElementById('qrcode');
new QRCode(canvas , {
text: '11111111' ,//二維碼內容，如果是路徑直接跳轉
width: 360,
height: 360,
colorDark: '#000', // 二維碼顏色
colorLight: '#ffffff', // 二維碼背景色
correctLevel: QRCode.CorrectLevel.L// 容錯率，L/M/H
})
},
4、mounted中調用（注意，不能再created中調用）
mounted() {
this.useqrcode();//渲染二維碼
},
二、帶logo的用法
實現效果：(這裏中間是我自己扣扣截圖百度網盤的)
步驟（vue-qr）
1、安裝：
cnpm install vue-qr --save
2、調用：（還要註冊，一定要按步驟來）
（1） js中調用
import VueQr from ' vue-qr '
（2）template中添加容器
<vue-qr :logoSrc="imgUrl" text="Hello world!" :size="360"></vue-qr>
支持參數
（3）data中添加圖片路徑
data () {
return {
imgUrl:require('@/assets/image/logo.png') //你自己logo路徑
};
},
（4）***components中註冊
components: {
VueQr
},
到此就結束了！