手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

如何用vue生成二维码

时间:2024-10-18 20:42:50

1、进入到vue项目的根目录,鼠标右键选择Git,然后输入命令安装vue-qr

如何用vue生成二维码

2、打开HBuilderX工具,在components文件夹下,新建vue文件Qr.vue

如何用vue生成二维码

3、使用import导入vue-qr,初始化图片路径,并在components注册组件

如何用vue生成二维码

4、在template标签中,引入vue-qr,绑定几个属性

如何用vue生成二维码

5、打开App.vue文件,导入Qr组件,然后在界面上引入

如何用vue生成二维码

6、保存代码并运行项目,打开浏览器,输入网址查看效果

如何用vue生成二维码

7、结果出现了报错,检查代码发现,是由于缺少props属性

如何用vue生成二维码

8、再次保存代码并刷新浏览器,可以查看到界面上生成一个二维码

如何用vue生成二维码
© 手抄报圈