--- theme: condensed-night-purple highlight: atelier-cave-light --- ## 简介 **功能**：用于生成二维码 **优点**：简单 **缺点**：不支持ie **官网**：https://www.npmjs.com/package/vue-qr **实现效果** ![截图.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af418112e1344e54bfc693c76fb577f9~tplv-k3u1fbpfcp-watermark.image?)
## 安装 ```js // npm npm install vue-qr --save // yarn yarn add vue-qr ```
## 导入注意vue2、vue3 导入方式有点差异 ```js // vue2.x import VueQr from 'vue-qr' // vue3.x import vueQr from 'vue-qr/src/packages/vue-qr.vue' ```
## 使用 ```js

``` 关于图片导入下面会细说 ```js import logoImg from '@/assets/logo.png' // 先把图片导入存在一个变量里 export default { // 注册组件 components: {vueQr},     data(){         return{ logoPath: logoImg, // 或者用require()来导入 // logoPath: require('@/assets/logo.png'), textValue:'https://cn.vuejs.org/'         }     } } ```
## 下载二维码下载二维码这个功能，只需要加一个按钮元素然后绑定一个点击事件 ```js // 事件处理函数 downloadQR() {             const a = document.createElement('a')             // 下载的文件名             a.download = '二维码'             // url             a.href = this.$refs.qrCode.$el.src             // 触发点击             a.click()         }, ```
## 主要配置项 | | | | --- | --- | | text | 二维码要展示的内容 | | logoSrc | 二维码中间的小logo | | logoScale | 小logo的大小（别搞太大，超过容错率识别不出来的） | | size | 整个二维码所占空间的大小，（宽高相等，包含margin）
可能需要你自己用css设置一下图片宽高100% | | margin | 二维码的外边距（默认 20px） | 全部配置项自行去官网查
## 注意--安装失败这个问题我也是通过另一个作者的文章来解决的 **原文**：https://blog.csdn.net/weixin_42717937/article/details/121405199 安装vue-qr这个包的时候可能卡在某个地方无法安装需要在根目录下新建一个配置文件用yarn安装就是 **\.yarnrc** 用npm安装就是 **\.npmrc** 多一句嘴：注意文件名是以点 **\.** 开头的 ![截图.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f31c6b72ee94241a54a53b0a9ded29c~tplv-k3u1fbpfcp-watermark.image?) ### .yarnrc文件内容 ```js registry "https://registry.npm.taobao.org" sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" phantomjs_cdnurl "http://cnpmjs.org/downloads" electron_mirror "https://npm.taobao.org/mirrors/electron/" sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/" profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/" chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver" canvas_binary_host_mirror "https://npm.taobao.org/mirrors/node-canvas-prebuilt/" ``` ### .npmrc文件内容 ```js home="https://npm.taobao.org" registry="https://registry.npm.taobao.org/" sass_binary_site="https://npm.taobao.org/mirrors/node-sass/" phantomjs_cdnurl="http://cnpmjs.org/downloads" electron_mirror="https://npm.taobao.org/mirrors/electron/" sqlite3_binary_host_mirror="https://foxgis.oss-cn-shanghai.aliyuncs.com/" profiler_binary_host_mirror="https://npm.taobao.org/mirrors/node-inspector/" chromedriver_cdnurl="https://cdn.npm.taobao.org/dist/chromedriver" canvas_binary_host_mirror= "https://npm.taobao.org/mirrors/node-canvas-prebuilt/" ``` 通过上面的方法我成功安装上了vue-qr这个包，但是马上就报了一堆错，我猜应该就是上面的文件导致的，然后直接把刚才创建的文件删除就没事了
## 注意--图片引入关于中间那个logo图的导入因为 **:src** 会将后面的值当做变量解析所以我们可以将图片存在一个变量里或者通过require()方法来导入 ```js import logoImg from '@/assets/logo.png' // 先把图片导入存在一个变量里 export default { components: {vueQr},     data(){         return{ logoPath: logoImg, // 或者用require()来导入 // logoPath: require('@/assets/logo.png'), textValue:'https://cn.vuejs.org/'         }     } } ``` 还可以直接在组件中通过require()来导入 ```js

```