###### tags: `Vue cli`
# Vue cli環境安裝
# 1. 先安裝node.js、或是NVM
可以輸入在cdm輸入'node -v'與'npm -v'查詢安裝的版本
# 2.安裝Vue cli
輸入'npm install -g @vue/cli'安裝
mac版本如果以上指令沒辦法安裝改輸入'sudo npm install -g @vue/cli'
可以輸入'vue -V'查詢目前的版本
做完以上的步驟代表所有的這台電腦可以運行Vue cli
# 3. 進入資料夾
輸入"cd '資料夾路徑'"，可以直接輸入'cd '用滑鼠拖資料夾
# 4. 建立專案(使用vue create)
輸入'vue create "資料夾名稱"'，就會開始進行環境安裝
# 5. 安裝完成後選擇設定

這裡需要依照開發需求選擇設定，以下設定依照六角學院影音課程建議所設。
## 5.1 選擇 Manually select features

點選後會出現下圖，請依找下圖使用空白建選擇。
## 5.1.1 選擇vue版本
請選擇3.x

## 5.1.2 router的歷史訊息模式

輸入n

## 5.1.3 css的語言處理器選擇
選擇node.js (Sass/SCSS (with node-sass) )

## 5.1.4 ESLint
Airbnb config給對JS有一定程度了解的人選擇
Standard config給初學者選擇

## 5.1.5 選擇檢視的時機
選擇存檔時進行檢視

## 5.1.6 選擇獨立儲存設定檔或使用json儲存以及選擇是否另儲存設定檔
1.選擇獨立儲存
2.n


出現下圖代表安裝完成


# 6 .使用VScode開啟資料夾，運行環境
範例是prictice-project
按下ctrl+` 打開vsocde終端機

到 cd prictice-project
輸入'npm run serve'

如果出現下圖代表環境運行成功。

接續7.

# 4-1 建立專案(使用GUI) 接續3.

在cdm輸入'vue ui'後如下圖

這時候網頁會打開如下圖


# 5-1 點選 在此建立新專案與設定
1.
2.
3.與5.1的選擇相同



出現下圖代表新專案環境建立完成


點選任務>serve>執行 就可以運行環境


# 7 安裝boostrap5
7.1使用gui 點選依賴>搜尋bootstrap5>安裝如下圖


7.2使用vue create
在VScode終端機先終止運行，ctrl+c後輸入'npm install bootstrap' `