一、使用场景

技术点：二维码生成插件的使用。这里介绍一款常用的功能插件——QRCode

二、QRCode插件的使用

首先第一步：安装插件，运行以下命令：npm install qrcode --save

使用插件生成二维码的示例代码（子组件Erweima.vue）：

<template>
  <div>
      <h2>扫一扫二维码进入百度首页</h2>
      <!-- 生成二维码区域 -->
      <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import Vue from "vue"
// 引入QRcode插件
import QRCode from "qrcode"
Vue.use(QRCode)
export default {
    name:Erweima,
    data(){
        return{

        }
    },
    methods:{
        useqrcode(){
            var canvas=document.getElementById("canvas");
            QRCode.toCanvas(canvas,"http://www.baidu.com",function(error){
                if(error){
                    console.log(error);
                }else{
                    console.log("success!");
                }
            });
        }

    },
    mounted(){
        // 组件挂载的时候，调用生成二维码函数
        this.useqrcode();
    }

}
</script>

<style>

</style>

父组件App.vue：

<template>
  <div id="app">
    <Erweima></Erweima>
  </div>
</template>

<script>
import Erweima from @/components/Erweima.vue
export default {
  components: { Erweima },
  name: App,
  data(){
    return{
      
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>