# 在 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)