在Vue.js中，彈出框(alert)組件是很實用的，其中alert.vue組件是其中的一種。

<template>
<div class="alert" v-if="visible">
<div class="alert-message">{{ message }}</div>
<button class="alert-btn" @click="hideAlert">OK</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
visible: true,
};
},
methods: {
hideAlert() {
this.visible = false;
},
},
};
</script>
<style scoped>
.alert {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.alert-message {
font-size: 2rem;
color: white;
}
.alert-btn {
font-size: 2rem;
border: none;
background-color: white;
color: black;
padding: 1rem 2rem;
cursor: pointer;
margin-top: 2rem;
}
</style>

上面的代碼定義了一個基本的alert組件。它包括一個提示消息和一個OK按鈕。

在組件的data()方法中，我們定義了消息(message)和visible屬性，visible屬性初始化為true，使得組件第一次渲染就會顯示出來。

hideAlert()方法會將visible屬性設置為false，以便在點擊OK按鈕后關閉alert彈出框。

在樣式中，我們將alert組件定位在視口的正中央，使用半透明黑色背景增加一種模態感。