---
# System prepended metadata

title: 在 VueCli 加入「使用終端機下載依賴、Vue元件、調用Vue資料」(6-4)
tags: [6. VueCli, Vue]

---

# 在 VueCli 加入「使用終端機下載依賴、Vue元件、調用Vue資料」(6-4)
###### tags: `Vue`、`6. VueCli`
2022.3.11

## 使用終端機下載依賴 (Bootstrap)
### 1. npm 下載 bootstrap
[Bootstrap 官網](https://getbootstrap.com/)找尋 npm 安裝指令
```
npm install bootstrap
```
### 2. 在 App.vue 中，載入 Bootrstrap 套件。
@ : 在VueCli中代表 `src` 資料夾。

![](https://i.imgur.com/dX2p30G.png)

### 3. 使用Bootstrap語法，檢視使否能成功顯示。


## 新增元件
### 1. 在 @/components 資料夾中新增元件(檔名開頭要大寫)，並撰寫元件內容程式。 範例 : Bootstrap Card

![](https://i.imgur.com/s5WZMb0.png)

### 2. 在欲引用元件的網頁中，遷入元件。

![](https://i.imgur.com/Q0H6sCS.png)

## 調用Vue資料
![](https://i.imgur.com/3qbxcEC.png)
