首先安装方法：（--save 参数会改变package.json 推荐使用 下次直接install就行了）

npm install --save qrcode

然后项目使用：

import QRCode from 'qrcode'

然后使用方法：

html 使用 -

<!-- index.html -->

<html>

  <body>

    <canvas id="canvas"></canvas>

    <script src="bundle.js"></script>

  </body>

</html>
// index.js -> bundle.js

var QRCode = require('qrcode')

var canvas = document.getElementById('canvas')

QRCode.toCanvas(canvas, '二维码内容xxxxxx', function (error) {

  if (error) console.error(error)

  console.log('success!');

})

NodeJS

var QRCode = require('qrcode')

QRCode.toDataURL('二维码内容xxxxxx!', function (err, url) { console.log(url) })

ES6/ES7

1.异步方式

import QRCode from 'qrcode'

// With promises

QRCode.toDataURL('二维码内容xxxxxx!') .then(url => { console.log(url) }) .catch(err => { console.error(err) })

2.同步方式

// With async/await
let text = 'xxxxxxxx';

const generateQR = async text => {

  try {

    console.log(await QRCode.toDataURL(text))

  } catch (err) {

    console.error(err)

  }

}


 






												


											
vue 生成 二维码 qrCode 插件 使用 方法的更多相关文章
	

    
								
  1. VUE 生成二维码插件
		
    原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...
    
		
    2. 
						
  2. js生成二维码  qrcode
		
    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...
    
		
    3. 
						
  3. Java生成二维码QRCode.jar
		
    所需jar包:QRCode.jar:http://download.csdn.net/detail/xuxu198899223/7717745 package ewm; import java.awt ...
    
		
    4. 
						
  4. php生成二维码的插件phpqrcode
		
    参考网址: http://www.thinkphp.cn/topic/7749.html http://blog.csdn.net/stxyc/article/details/44650971 php ...
    
		
    5. 
						
  5. VUE 生成二维码(qrcodejs)
		
    1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...
    
		
    6. 
						
  6. 【C#/WPF】.Net生成二维码QRCode的工具
		
    先马 http://qrcodenet.codeplex.com/ 使用该工具WPF生成二维码的简单例子: 前台XAML准备一个Image控件显示二维码. string qrcodeStr = &qu ...
    
		
    7. 
						
  7. vue 生成二维码+截图
		
    链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...
    
		
    8. 
						
  8. 微信支付支付宝支付生成二维码的方法（php生成二维码的三种方法）
		
    如果图简单,可以用在线生成 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xinzhenkj.com 最简单 ...
    
		
    9. 
						
  9. 使用PHP生成二维码的两种方法(带logo图像)
		
    一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【linux配置】虚拟机配置静态IP地址
			
    使用VMware配置虚拟机静态IP地址 一.安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 Net网络连接方式,随意设置子网IP,点击NAT设置页面,查看子 ...
    
			
    2. 
						
  2. Sass ＠at-root （1）
			
    在SassConf大会上,给我们传递了Sass3.3的新特性.这些新特性有很多意义,特别是@at-root指令,这让你的代码会得更佳清洁. 今天我们主要一起来了解Sass中的@at-root特性的使用 ...
    
			
    3. 
						
  3. 使用 Docker/LXC 迅速启动一个桌面系统
			
    使用 Docker/LXC 迅速启动一个桌面系统 Docker 是 dotCloud 最近几个月刚宣布的开源引擎,旨在提供一种应用程序的自动化部署解决方案,简单的说就是,在 Linux 系统上迅速创建 ...
    
			
    4. 
						
  4. Directx11教程41 纹理映射(11)
			
    原文:Directx11教程41 纹理映射(11)     1.第一副图我们采用各性异性的滤波方式,并设置最大各性异性值为8.     samplerDesc.Filter =  D3D11_FILT ...
    
			
    5. 
						
  5. NodeJS基础之Express路由和中间件
			
    路由 路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求. 路由是由一个 URI.HTTP 请求(GET.POST等)和若干个句柄组成,它的结构如下: app.method(path, [ ...
    
			
    6. 
						
  6. day39-Spring 11-Spring的AOP：基于AspectJ的XML配置方式
			
    package cn.itcast.spring3.demo2; import org.aspectj.lang.ProceedingJoinPoint; /** * 切面类 * @author zh ...
    
			
    7. 
						
  7. python 同名变量引用
			
    
			
    8. 
						
  8. 云数据库RDS存储能力进化解析！
			
    数据库是企业IT系统的核心,其性能表现会直接影响整体业务系统的性能表现,而影响数据库性能因素包括系统架构设计.应用程序业务SQL语句.数据库参数优化配置.数据库运行的资源能力.系统架构设计和应用程序业 ...
    
			
    9. 
						
  9. ASO优化经验：APP关键字优化的技巧
			
    当开发首款产品的时候,可能你根本连ASO是什么都不知道,因为有太多别的事情需要你做.大多数新手开发商甚至到游戏要进入Appstore的时候才知道有“关键字”这件事要去研究.正因为这些开发商几乎没有在关 ...
    
			
    10. 
						
  10. @codeforces - 1149D@ Abandoning Roads
			
    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 点 m 条边的无向连通图,每条边的边权为 a 或  ...
    
			
    11.