前端如何使用 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 src="./dist/vue.js"></script>
<script src="./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 完整源码。