vue 生成二维码登录

vue项目就不说了，不懂可以去看我之前写的搭建过程的博客！！！！ 

一、在cmd你的vue项目目录下面，此处安装qrcodejs2

执行命令：

npm install qrcodejs2 --save

完成后在你的vue项目的package.json里面查看是否安装成功，成功后会出现版本号的：

二、新建vue页面

<template>
    <div class="div_box">
      <div id="qrCode" ref="qrCodeDiv" class="qr_code"></div>  //二维码div
      <div class="text">扫码登录</div>
    </div>
</template>

<script>
  import QRCode from 'qrcodejs2';  //在指定页面引入，也可以在main.js里面全局引用
    export default {
        name: "qrCode",
      data() {
        return {}
      },
      mounted: function () {
        this.$nextTick(function () {
          this.bindQRCode();
        })
      },
      methods: {
        bindQRCode: function () {
          new QRCode(this.$refs.qrCodeDiv, {
            text: 'https://www.baidu.com',
            width: 200,
            height: 200,
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
          })
        }
      }
    }
</script>

<style>
  .div_box{
    width: 300px;
    height: 300px;
    margin: 220px auto ;
  }
  .qr_code{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text{
    margin-top: 20px;
    text-align: center;
    font-size: 20px;
  }
</style>

效果图：（请测可以扫，就是百度的网页）