在vuecli项目中，我需要一个组件，当我点击按钮时生成一个二维码，二维码中的数据是一个电话号码，手机扫描二维码可以打电话

你可以使用QRCode.js生成二维码，并使用Vue.js的事件绑定机制来处理按钮点击事件。以下是一个简单的示例代码：

1. 首先安装QRCode.js

npm install qrcode

2. 在组件中引入QRCode.js

import QRCode from 'qrcode'

3. 在模板中添加按钮和二维码容器

<template>
  <div>
    <button @click="generateQRCode">生成二维码</button>
    <div ref="qrcode"></div>
  </div>
</template>

4. 在组件中定义generateQRCode方法，生成二维码并将其渲染到容器中

export default {
  methods: {
    generateQRCode() {
      const phoneNumber = '1234567890' // 替换成你的电话号码
      QRCode.toCanvas(this.$refs.qrcode, phoneNumber, (error) => {
        if (error) console.error(error)
      })
    }
  }
}

5. 在二维码中添加tel协议，使手机扫描二维码可以打电话

export default {
  methods: {
    generateQRCode() {
      const phoneNumber = '1234567890'
      const canvas = this.$refs.qrcode
      QRCode.toCanvas(canvas, phoneNumber, { 
        errorCorrectionLevel: 'H', // 设置容错级别为高
        margin: 2, // 设置边距为2
      }, (error) => {
        if (error) console.error(error)
        // 添加tel协议
        canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '')
          .replace(/=/g, '').match(/.{1,4}/g).join('')
          .split('').map(c => String.fromCharCode(parseInt(c, 16) + 128)).join('')
          .split('').map(c => String.fromCharCode(c.charCodeAt(0) ^ 32)).join('')
          .replace(/\+/g, '-').replace(/\//g, '_')
          .replace(/(.{64})/g, '$1\n')
          .replace(/^/g, 'data:image/png;base64,')
      })
    }
  }
}

注意：以上代码仅供参考，实际使用时需要根据具体情况进行调整。