Idea Vue 是一個開源的前端組件庫，它基于 Vue.js 構建。使用 Idea Vue，開發人員可以快速構建并維護優雅的網站和應用程序。下面是關于 Idea Vue 組件的幾個例子。

1. Button 組件

<template>
<button class="button">{{ text }}</button>
</template>
<script>
export default {
props: {
text: {
type: String,
default: 'Button',
},
},
};
</script>
<style scoped>
.button {
border: none;
background-color: #4CAF50;
color: #FFFFFF;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>

2. Input 組件

<template>
<div class="input">
<input :type="type" :placeholder="placeholder" v-model="value">
<span v-if="isError">{{ errorMessage }}</span>
</div>
</template>
<script>
export default {
props: {
type: {
type: String,
default: 'text',
},
placeholder: String,
value: String,
errorMessage: String,
isError: Boolean,
},
};
</script>
<style scoped>
.input {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
input[type="text"], input[type="password"], textarea {
font-size: 16px;
padding: 10px;
border: none;
border-bottom: 1px solid #cccccc;
height: 40px;
width: 100%;
margin-bottom: 10px;
}
span {
margin-top: 10px;
color: red;
}
</style>

以上是 Idea Vue 的兩個組件的代碼示例。通過 Idea Vue，可以快速創建自定義的組件，并在 Vue 項目中進行使用。