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>