此章節假設你已經看過了組件基礎。若你還不了解組件是什麽，請先閱讀該章節。
一個 Vue 組件在使用前需要先被“注冊”，這樣 Vue 才能在渲染模板時找到其對應的實現。組件注冊有兩種方式：全局注冊和局部注冊。
我們可以使用 Vue 應用實例的 .component() 方法，讓組件在當前 Vue 應用中全局可用。
import { createApp } from 'vue'
const app = createApp({})
app.component(
// 注冊的名字
'MyComponent',
// 組件的實現
{
/* ... */
}
)
如果使用單文件組件，你可以注冊被導入的 .vue 文件：
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)
.component() 方法可以被鏈式調用：
app
.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)
全局注冊的組件可以在此應用的任意組件的模板中使用：
<!-- 這在當前應用的任意組件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>
所有的子組件也可以使用全局注冊的組件，這意味著這三個組件也都可以在彼此內部使用。
全局注冊雖然很方便，但有以下幾個問題：
全局注冊，但並沒有被使用的組件無法在生產打包時被自動移除 (也叫“tree-shaking”)。如果你全局注冊了一個組件，即使它並沒有被實際使用，它仍然會出現在打包後的 JS 文件中。
全局注冊在大型項目中使項目的依賴關系變得不那麽明確。在父組件中使用子組件時，不太容易定位子組件的實現。和使用過多的全局變量一樣，這可能會影響應用長期的可維護性。
相比之下，局部注冊的組件需要在使用它的父組件中顯式導入，並且只能在該父組件中使用。它的優點是使組件之間的依賴關系更加明確，並且對 tree-shaking 更加友好。
對於每個 components 對象里的屬性，它們的 key 名就是注冊的組件名，而值就是相應組件的實現。上面的例子中使用的是 ES2015 的縮寫語法，等價於：
export default {
components: {
ComponentA: ComponentA
}
// ...
}
請注意：局部注冊的組件在後代組件中並不可用。在這個例子中，ComponentA 注冊後僅在當前組件可用，而在任何的子組件或更深層的子組件中都不可用。
在整個指引中，我們都使用 PascalCase 作為組件名的注冊格式，這是因為：
PascalCase 是合法的 JavaScript 標識符。這使得在 JavaScript 中導入和注冊組件都很容易，同時 IDE 也能提供較好的自動補全。
<PascalCase /> 在模板中更明顯地表明了這是一個 Vue 組件，而不是原生 HTML 元素。同時也能夠將 Vue 組件和自定義元素 (web components) 區分開來。
在單文件組件和內聯字符串模板中，我們都推薦這樣做。但是，PascalCase 的標簽名在 DOM 內模板中是不可用的，詳情參見 DOM 內模板解析注意事項。
為了方便，Vue 支持將模板中使用 kebab-case 的標簽解析為使用 PascalCase 注冊的組件。這意味著一個以 MyComponent 為名注冊的組件，在模板中可以通過 <MyComponent> 或 <my-component> 引用。這讓我們能夠使用同樣的 JavaScript 組件注冊代碼來配合不同來源的模板。