當我們需要在網站或者應用程序中使用二維碼時，一個優秀的庫可以幫助我們快速的生成和展示二維碼。眾所周知，Vue 是一個非常流行的 JavaScript 框架。Vue 也提供了無數豐富的插件和庫，可以幫助我們優化開發流程。其中一個非常流行的庫就是 qrcode.js。

在 Vue 項目中使用 qrcode.js 庫非常簡單。我們可以使用 npm 或者 yarn 安裝這個庫。在這個例子中，我們將使用 npm。

npm install qrcode --save

一旦我們安裝了 qrcore，我們可以將這個庫引入到我們的 Vue 組件中并使用它。我們可以在vue component中為我們的二維碼指定 size 和 value。可選的參數還包括 margin，color，和 background。

import QRCode from 'qrcode'
export default {
data() {
return {
qrValue: '',
qrSize: 200
}
},
mounted() {
this.generateQRCode()
},
methods: {
generateQRCode() {
QRCode.toDataURL(this.qrValue, { width: this.qrSize }, (err, url) =>{
if (err) {
console.error(err)
return
}
this.qrSrc = url
})
}
}
}

我們在這個組件中定義了比較簡單的一個 data 屬性。qrValue 是這個二維碼的值，qrSize 是這個二維碼的尺寸。我們在 mounted vue 生命周期之后，調用了 generateQRCode 方法來生成我們的二維碼。generateQRCode 方法使用了 qrcode.js 的 toDataUrl 方法，將二維碼轉化成了一個可用的 data uri，然后將這個 uri 存儲到 qrSrc data 屬性中。

在我們的模板代碼中，我們可以使用v-if屬性測試是否成功生成了我們的二維碼。如果沒有成功，我們顯示一個錯誤信息。我們使用了 img 屬性，通過綁定屬性 src 來顯示我們的二維碼。

<template>
<div>
<div v-if="qrSrc">
<img :src="qrSrc" :width="qrSize" :height="qrSize" />
</div>
<div v-else>
<p>抱歉，二維碼生成失敗。</p>
</div>
</div>
</template>

我們可以看到，qrcode.js 可以在 Vue 中很好的使用。我們簡單的綁定了數據屬性并將其存儲在創建的二維碼中。我們可以定義大小和顏色等屬性來創建我們想要的外觀。總體而言，使用 qrcode.js 是一件超級簡單的事情，這使得我們在 Vue 項目中快速添加二維碼成為了一件很輕松的事情。