樓主專案需求中需要加入一個二維碼掃描功能，在這之前還沒有用過整合vue-cli腳手架裡面的二維碼外掛，這塊樓主就去github上面找開源的外掛，基於vue的外掛貌似很多，一般都會滿足大部分需求，然後就是幾經波折，最後實現了一下功能

這裡樓主想跟各位說明一下：

• 二維碼是通過今天的主角 “vue-qriously” 外掛來生成的一個二維碼；
• 當前講解的是這個外掛應用於vue-cli中；
• 如有不妥，請多多包涵和指教。

vue-qriously 介紹

個人理解的外掛介紹： 可以使用qrious在HTML Canvas上繪製QR碼的vue元件。

題外話：一個與Vue.js相關的精美事物清單，即：

程式碼案例

• 安裝

npm install vue-qriously --save-dev

• main.js 入口檔案

import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

• vue檔案中

<template>
    <qriously :value="initQCode" :size="138"/>     <!-- initQCode: 是你在你的vue例項中定義好的變數   size:是這個Canvas的大小，這裡要根據你的視覺稿來決定-->
 

</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                initQCode: '你自定定義的值'
            }
        }
    }
</script>
<style lang="less">
    /*樣式*/
</style>

總結

• vue作為現在比較火的前端框架，我個人也在摸索學習階段；
• 會遇到很多問題，但是如果靜下心來去解決，這些都會迎刃而解；
• 此文章僅作專案總結，如有不妥，請多多包涵。