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作为现在比较火的前端框架，我个人也在摸索学习阶段；

会遇到很多问题，但是如果静下心来去解决，这些都会迎刃而解；

此文章仅作项目总结，如有不妥，请多多包涵。