今天同事问我一个问题，在vue项目中想要根据一个链接显示对应的二维码该怎么实现。

我前一段时间，有用apicloud项目生成二维码的功能，但是vue版本的没有处理过。百度后找到一个可行的方案：

大神实现vue项目中显示二维码功能的参考链接：https://www.cnblogs.com/hss-blog/articles/9188101.html

文章中提到了两个好用的二维码插件，vue-qart与qrcode，由于第一种需要进行配置，而我对webpack之类的并不熟悉，保险起见，我采用了第二种方法：

由于我是在现有的后台系统中安装的qrcode的插件，安装完成后，在执行npm run serve时，一直报错：

网上也有大神遇到同样的报错信息，然后大神提出的解决办法就是：

但是我测试过，并没有什么用处。

因此我删除node_modules和package.json文件，从svn分支上重新拉取，然后安装qrcode时，采用cnpm install qrcodejs2 --save的方式来安装，最终成功。

npm 安装插件后报错，可以删除插件卸载插件后，通过cnpm来进行安装！！！

下面看下我的使用步骤：自己写一遍，才能够印象深刻！！！

1.引入qrcodejs2

import QRCode from 'qrcodejs2'

2.注册qrcode插件

components:{ QRCode}

3.html页面布局

<div ref="qrcode" id="qrcode"></div>

4.渲染二维码

this.$nextTick(() => {
  new QRCode("qrcode", {
    width: 200,
    height: 200,
    text: "https://www.baidu.com",
  });
});

最终效果如下：

完成！！！！