近来有幸被安排实现一个生成二维码预览的功能，个人感觉挺好玩，就欣然接受了。首先百度了下，发现vue中生成二维码的插件还不少呢，用的比较火的，有这么两个插件 vue-qart 和 vue-qr ，对比了下，感觉vue-qr的功能实现起来更加简单丰富，所以选择了vue-qr。本人是vue小白，记录下实现过程和遇到的深坑。

效果图如下：

 

因为是插件，所以实现起来还是比较简单的，固定的套路。

1.install with NPM

npm install vue-qr --save

2.在对应的模块中 Import 进vueQr组件 

import VueQr from 'vue-qr'

export default {
    components: { VueQr },
}

3.In template

<vue-qr :bgSrc='config.logo' :logoSrc="config.logo" :text="config.value" :size="200"></vue-qr>

4. 在data中配置

data() {
    return {
        config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: require('../assets/logo.png')//中间logo的地址
        }
    }
}
 

5.成了。启动运行，浏览器查看效果即可。

为了方便 有需要的朋友，贴上二维码组件的全部代码如下：

<!--  -->
<template>
    <div>
      <h3>二维码生成组件</h3>
        <!-- <vue-qr  :logoSrc="config.logo" :text="config.value" :size="200" :margin="0"></vue-qr> -->
        <vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :text="config.value" :size="200" :margin="0"></vue-qr>
        <vue-qr style="float:left;margin-left:200px;" :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>
        <vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>
    </div>
        
</template>

<script>
import VueQr from 'vue-qr'

export default {
  components: { VueQr },
  data() {
    return {
        config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: require('../assets/logo.png')//中间logo的地址
        }
    }
  },
  computed: {},

  //事件（钩子）回调函数：
  //组件创建之后，数据已经完成初始化，但是DOM还未生成
  created() {},

  //数据装载DOM上后，各种数据已经就位，将数据渲染到DOM上，DOM已经完成
  mounted() {},

  methods: {}
}
</script>
<style scoped>
</style>

好了，实现过程看起来貌似很简单，其实并没有想得那么简单。记录下爬过的深坑，还是关于二维码生成的问题。

问题1：启动报错，找不见logo.png 这种情况，处理方式，在项目根路径下重新执行一遍npm install 。如果还不行，就先把图片引用的代码注释掉，这样应该就可以正常启动了。

问题2：不报错，但是二维码就是不显示。这种应该是最让人头疼的了，连个报错都没有，简直是无从下手啊。这时，建议你试试把<vue-qr>中图片引用的相关代码先删掉，只保留:text，如下

<vue-qr :text="config.value" :size="200" :margin="0"></vue-qr>

这时应该是可以显示一个二维码的，但是没有logo和背景。

“带上图片就什么不显示也不报错，不带图片就可以显示二维码” ，那好办啊，不要图片了，凑合能用就行。

如果一开始就没有图片，也就凑合用了，但是见过好的，就说明可以实现，肯定还是哪里有问题。百度了好久，偶然发现了点小问题，在第4步，我最初的写法如下：

data() {
    return {
        config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: '../assets/alogo.png'//中间logo的地址
        }
    }
  },

细心的童鞋应该已经发现了，imagePath后面的路径少了require的包裹。加上之后，怀着激动的心情，切出了浏览器，带logo和背景的二维码出来了。

本人非前端工程师，只是近期前端进度偏慢，被领导拉去帮忙的，所以对于引用图片路径为什么要加require还没有深入见解，欢迎前端大牛指教。

现在vue越来越火，但网上关于vue实现二维码的报错的问题总结，帖子少的可怜，所以感觉有必要记录下，帮助到有需要的朋友。

vue玩了两周多了，感觉从最初的很晕很不适应，到现在觉得，越来越灵活，越来越好玩。用vue开发还挺爽的！