🧩 Vue 二维码插件推荐

插件名	优势亮点	是否支持自定义	是否支持 Logo	推荐指数
vue-qr	高级定制、支持 Logo、渐变	✅	✅	⭐⭐⭐⭐⭐
qrcode.vue	轻量、原生 Vue 组件	✅	❌	⭐⭐⭐
vue-qrcode	支持下载、颜色自定义	✅	❌	⭐⭐⭐
qrcode（库）	极致自由、适合自定义场景	✅	✅*	⭐⭐⭐⭐

*qrcode 库需自行处理 Logo 合成

---

1️⃣ vue-qr（⭐ 强烈推荐）

• 特点：功能丰富，支持嵌入 Logo、渐变色、圆角等高级样式。
• 安装

  npm install vue-qr
  

• 用法

  <template>
    <vue-qr :text="'https://juejin.cn'" :logo-src="'/logo.png'" :size="200" />
  </template>
  
  <script>
  import VueQr from 'vue-qr'
  export default {
    components: { VueQr }
  }
  </script>
  

---

2️⃣ qrcode.vue

• 特点：原生 Vue 组件，轻量级，易用，适合大部分需求。
• 安装

  npm install qrcode.vue
  

• 用法

  <template>
    <qrcode-vue value="https://juejin.cn" :size="200" />
  </template>
  
  <script setup>
  import QrcodeVue from 'qrcode.vue'
  </script>
  

---

3️ vue-qrcode

• 特点：支持二维码下载、颜色自定义，兼容性好。
• 安装

  npm install vue-qrcode
  

• 用法

  <template>
    <vue-qrcode value="Hello, Vue!" :options="{ width: 150 }" />
  </template>
  
  <script>
  import VueQrcode from '@chenfengyuan/vue-qrcode'
  export default {
    components: { VueQrcode }
  }
  </script>
  

---

4️⃣ qrcode（第三方库，适合极致自定义）

• 特点：适合 canvas 或图片极致自定义场景，可与 Vue 结合使用。
• 安装

  npm install qrcode
  

• 用法

  import QRCode from 'qrcode'
  QRCode.toDataURL('https://juejin.cn').then(url => {
    // url 是 base64，可用于 <img :src="url" />
  })
  

---

🚀 总结

• 🔥 推荐新手和常规场景用 qrcode.vue
• 🎨 需要 Logo、渐变等高级样式选 vue-qr
• 🧩 极致自由需求可用 qrcode 库+自定义渲染

---

觉得有用欢迎点赞收藏！更多前端实用技巧，欢迎关注我！🧑‍💻✨