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作为现在比较火的前端框架，我个人也在摸索学习阶段；
• 会遇到很多问题，但是如果静下心来去解决，这些都会迎刃而解；
• 此文章仅作项目总结，如有不妥，请多多包涵。