# Vue CLi學習#4 Vue CLi 加入元件
###### tags: `Vue cli`

## 怎麼匯入元件

### HelloWorld.vue

一開始建立專案啟用 npm run serve 的初始頁面就是一個元件，是由 HomeView.vue 匯入 HelloWorld.vue 這個元件，頁面的內容就是這個元件的內容

### 如何匯入

我們來看一下 HomeView.vue 是怎麼匯入 HelloWorld.vue

#### 第一步 : 匯入

首先要先 import 元件，通常都會放在 Vue 專案中的 src 的 components 資料夾中，這邊可以看到路徑開頭使用 `@` ， `@` 代表的是 src 這個資料夾

#### 第二步 : 註冊元件

再匯入元件之後，HomeView.vue 需要將這個元件註冊，這邊使用區域註冊的方式將元件匯入，元件名稱就是 import 後面接著你定義的名稱

#### 第三步 : 放上元件

註冊完之後，將元件放上 HomeView.vue 的 template 模板上呈現

### 用初始專案的 HomeView.vue 匯入 HelloWorld.vue 元件來當作匯入元件範例

## 小提醒

### 1. 不管是 components 資料夾的元件檔案或是 View 資料夾的獨立頁面檔案，只要是 `.vue` 的檔案都要大寫開頭

### 2. 如果元件沒有想要插入別的內容，採自閉合的標籤方式會比較好認出哪種是元件 ， EX: `<HelloWorld />`