vue-cli腳手架之二維碼的生成（vue-qriously）

前言

樓主項目需求中須要加入一個二維碼掃描功能，在這以前尚未用過集成vue-cli腳手架裏面的二維碼插件，這塊樓主就去github上面找開源的插件，基於vue的插件貌似不少，通常都會知足大部分需求，而後就是幾經波折，最後實現了一下功能

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

• 二維碼是經過今天的主角 「vue-qriously」 插件來生成的一個二維碼；
• 當前講解的是這個插件應用於vue-cli中；
• 若有不妥，請多多包涵和指教。

vue-qriously 介紹

插件源碼地址：https://github.com/theomessin/vue-qriously

我的理解的插件介紹： 能夠使用qrious在HTML Canvas上繪製QR碼的vue組件。

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

代碼案例

• 安裝

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做爲如今比較火的前端框架，我我的也在摸索學習階段；
• 會遇到不少問題，可是若是靜下心來去解決，這些都會迎刃而解；
• 此文章僅做項目總結，若有不妥，請多多包涵。