首先，要給Vue添加電話號碼，我們需要在Vue的組件中引入Vue-電話輸入框插件。這個插件可以讓用戶方便地輸入電話號碼，并進行驗證。使用npm進行安裝，運行以下命令即可：

npm install vue-tel-input --save

然后，在Vue組件中引入插件，可以像下面這樣進行：

<template>
<div>
<vue-tel-input v-model="tel" :inputOptions="{ showDialCode: true }" />
<button @click="save">Save</button>
</div>
</template>
<script>
import VueTelInput from 'vue-tel-input'
export default {
components: {
'vue-tel-input': VueTelInput
},
data () {
return {
tel: ''
}
},
methods: {
save () {
// Save phone number
console.log(this.tel)
}
}
}
</script>

在這個例子中，我們創建了一個組件，并引入了Vue-電話輸入框插件。我們使用v-model將電話號碼綁定到組件上，并使用showDialCode選項顯示國際撥號碼。

為了方便用戶的輸入，我們還可以使用phone-number-input插件。這個插件還支持自動填充國際撥號碼和快速刪除號碼以及自動格式化電話號碼。

使用npm進行安裝，運行以下命令即可：

npm install --save vue-phone-number-input

然后，在Vue組件中引入插件，可以像下面這樣進行：

<template>
<div>
<phone-number-input v-model="phone"></phone-number-input>
</div>
</template>
<script>
import PhoneNumberInput from 'vue-phone-number-input'
import 'vue-phone-number-input/dist/vue-phone-number-input.css'
export default {
components: {
'phone-number-input': PhoneNumberInput
},
data () {
return {
phone: ''
}
}
}
</script>

在這個例子中，我們創建了一個組件，并引入了phone-number-input插件。我們使用v-model將電話號碼綁定到組件上。

除了以上兩種方法，還有其他一些方法可以在Vue中添加電話號碼，比如使用Vue的自定義指令或使用Vue的過濾器，等等。不同的方式適用于不同的應用場景，我們可以根據實際情況進行選擇。