无论是nuxt框架还是二维码生成插件，对于现在整个前端开发中都是比较重要的存在。nuxt框架更利于seo的优化，二维码在生活中随处可见的趋势更不需要多加说明。

本文介绍在前端开发中基于nuxt框架如何使用uQRCode插件来生成二维码效果。

一、nuxt中使用uQRCode插件

    1.1、安装uqrcodejs

npm install uqrcodejs

    注：个人推荐最好用cnpm进行安装。如果你电脑没有安装cnpm，可本站搜索“ npm、cnpm、yarn安装卸载插件基础使用”查看cnpm的安装方法。

    1.2、template代码

<canvas id="qrcode" width="200" height="200"></canvas>
<button @click="sureClick" >生成二维码</button>

    1.3、script中代码说明

<script>
  import UQRCode from 'uqrcodejs';
  export default {
    data() {
      return {
        qrData:'在线免费生成二维码工具',//数据
        canvas:null
      }
    },
    created() { },
    mounted() { },
    methods:{
      sureClick:function(){
        if(this.qrData.length<=0){
          alert('数据不能为空！');
          return false
        }
        // 获取uQRCode实例
        var qr = new UQRCode();
        // 设置二维码内容
        qr.data = this.qrData;
        // 设置二维码大小，必须与canvas设置的宽高一致
        qr.size = 200;
        qr.margin = 10;
        // 调用制作二维码方法
        qr.make();
        // 获取canvas元素
        this.canvas = document.getElementById("qrcode");
        // 获取canvas上下文
        var canvasContext =  this.canvas.getContext("2d");
        // 设置uQRCode实例的canvas上下文
        qr.canvasContext = canvasContext;
        // 调用绘制方法将二维码图案绘制到canvas上
        qr.drawCanvas();
      },
      downLoadImage() {
        var a = document.createElement("a");
        a.href = this.canvas.toDataURL();
        a.download = '六月初工具站-二维码生成';
        a.click();
      }
    }
  }
</script>

二、代码解析

    2.1、关于UQRCode插件的使用及说明，大家可以去官方详细了解。官网地址“点击前去”

    2.2、downLoadImage方法说明，关于canvas的下载在本站另一篇文章中有详细说明。本站搜索《JavaScript将canvas生成的图片保存到本地》