Vue.js是一款流行的JavaScript框架，它具有可重用組件的能力，這使得Vue.js成為構建可擴展Web界面的強大工具。Vue組件是Vue.js應用程序中的基本構建塊，它們可以被重復使用，使代碼更易于維護和調試。

Vue組件可以通過組件ID來創建，然后使用Vue實例的components選項來引用組件。假設我們有一個名為my-component.vue的文件，其中包含以下HTML代碼：

<template>
<div>
<p>這是一個Vue組件</p>
</div>
</template>
<script>
export default {
name: 'my-component'
}
</script>

在Vue實例中，我們可以引用my-component.vue文件中定義的組件如下：

import MyComponent from './my-component.vue';
export default {
name: 'my-app',
components: {
'my-component': MyComponent
}
}

在上面的例子中，我們使用JavaScript的import語句將my-component.vue文件引入我們的應用程序中，并將其賦值給MyComponent變量。然后，我們使用Vue實例的components選項，將該組件添加到我們的應用程序中。

一旦組件添加到Vue實例中，我們就可以在模板中使用它。可以使用以下HTML標記引用組件：

<my-component></my-component>

上面的代碼將在頁面中顯示由組件定義的HTML代碼。這樣，我們就可以使用Vue組件構建復雜的Web界面，并使其更可擴展和易于維護。