Vue 是一款流行的 JavaScript 框架，它通過組件化的方式幫助開發者構建出復雜的用戶界面。在 Vue 中，我們可以通過使用組件來劃分復雜的 UI 為一些可復用的小部件。因此，這篇文章將會介紹如何在 Vue 中添加組件。

在 Vue 中，我們可以通過兩種方式來添加組件：全局組件和局部組件。

首先，我們來介紹全局組件。全局組件是可以在應用程序中的任何位置使用的組件。我們可以通過 Vue 實例的 components 選項來注冊全局組件，如下所示：

Vue.component('my-component', {
// 組件的選項
})

代碼中的 'my-component' 是一個自定義的標簽名，可以在 HTML 中用來調用這個組件。你可以在全局注冊組件的時候，將組件對象傳遞給 Vue.component() 方法，像下面這樣：

// 創建組件對象
var myComponent = {
// 組件的選項
}
// 將組件對象注冊到 Vue 實例中
Vue.component('my-component', myComponent)

現在，我們已經在應用程序中注冊了一個全局組件。這個組件可以在整個應用程序的任何位置使用。接下來，我們來看看如何在 Vue 中添加局部組件。

局部組件是定義在其他組件中的組件。它們只能在它們所屬的組件內部使用，因此它們通常比全局組件更加簡單，并且更具可讀性。我們可以通過在組件對象中使用 components 選項來注冊局部組件，如下所示：

var myComponent = {
// 組件的選項
components: {
'my-sub-component': {}
}
}

上面的代碼中，'my-component' 中包含 'my-sub-component' 這個局部組件。 在編寫上述代碼時，應注意要使用組件的自定義標簽而非組件名稱。例如，在 'my-component' 組件內部，可以使用 '' 標簽來調用 'my-sub-component' 組件。

除了全局組件和局部組件之外，Vue 還提供了單文件組件的概念，它將一個組件的 HTML 模板、CSS 樣式和 JavaScript 代碼合并在一個單獨的文件中。這種方式通常適用于更大型、更復雜的應用程序。

以上是在 Vue 中添加組件的常用方式。在開發 Vue 應用程序時，應根據實際情況選擇使用哪種方式來添加組件。無論使用哪種方式，組件化都是 Vue 開發的重要特性，它可以極大地提高應用程序的模塊化和可復用性。