前端如何使用 vue-qrcode 生成二维码

项目地址：https://github.com/xkeshi/vue-qrcode

目前前端有两种常见的方式引入各种前端框架和库，一种是直接使用 script 标签直接引用，一种是import 引入 npm  安装的版本。

vue-qrcode 当然也有两种引用方式，第二种作者在项目文档中说得很清楚了，import 之后直接用，但是第二种就让人踩了一些坑。

解决方案

引入 Vue 和 vue-qrcode，然后将 vue-qrcode 注册为Vue 组件，就可以愉快的使用了。

<div id="app">
  <qrcode :value="msg"></qrcode></div><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./dist/vue.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./dist/vue-qrcode.min.js"></script><script>
  window.addEventListener('DOMContentLoaded', function() {    var Vue = window.Vue;    var VueQrcode = window.VueQrcode;

    Vue.component('qrcode', VueQrcode);    new Vue({      el: '#app',      data: {        msg: 'https://xkeshi.github.io/vue-qrcode'
      }
    });
  });</script>

最后，猛戳这里，查看 Demo 完整源码。

作者：小董君
链接：https://www.jianshu.com/p/baacfb63be91