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