开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

1安装qrcodejs2

npm install qrcodejs2 -save

2在所需要的前端页面中引入

import QRCode from 'qrcodejs2'

3在你需要显示二维码的页面加上

<div class="item-pic"  id="qrCode"></div>

4定义生成二维码的方法

getQRInviteCode() {
      // 生成二维码
      new QRCode("qrCode", {
        width: 400, //宽度
        height: 400, // 高度
        text: "https://www.baidu.com/",
        render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
      });
    },

5在页面中展示二维码

 mounted(){
        this.getQRInviteCode()
  },  

属性设置

 getQRInviteCode() {
      // 生成二维码
      new QRCode("qrCode", {
        width: 400, //宽度
        height: 400, // 高度
        colorDark: "green",//有图案的地方
        colorLight: "#ffffff",// 没图的地方
        text: "https://www.baidu.com/",
        render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
      });
    },

全部代码

<template>
  <div class="code">
    <div class="title">URL生成二维码</div>
    <div class="warp">
      <div class="item-pic" id="qrCode"></div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  name: "HomeView",
  data() {
    return {};
  },
  mounted() {
    this.getQRInviteCode();
  },
  methods: {
    getQRInviteCode() {
      // 生成二维码
      new QRCode("qrCode", {
        width: 400, //宽度
        height: 400, // 高度
        colorDark: "green",//有图案的地方
        colorLight: "#ffffff",// 没图的地方
        text: "https://www.baidu.com/",
        render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
      });
    },
  },
};
</script>
<style lang="less" scoped>
.code {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
  .title {
    height: 30px;
    margin: 20px 0;
  }
  .warp {
    width: 400; //宽度
    height: 400; // 高度
  }
}
</style>