# Vue Cli 介紹&安裝&創建 (6-1)
###### tags: `Vue`、`6. VueCli`
2022.3.8

### 介紹
  **CLI**，全稱Command-Line Interface，簡稱命令介面，主要是用命令字元去操控。**GUI**，全稱Graphical User Interface，簡稱圖形使用者介面，可以使Cli更人性化。

#### Cli 特性與優點：
1. 基於Webpack所建置的開發工具。
2. 前後端分離。
3. 整合性工具，便於不同開發者協作。
4. 便於使用各種第三方套件(BS4、Vue Router)。
5. 可運行Sass、Bebel等編譯工具。
6. 獨特 .Vue檔案，一次性包含(html、js、css)
7. 便於開發**單頁式應用程式**(Single-page application,SPA)的網頁工具，讓每次網頁切換，不需重複下載資源。

## 安裝
### 1. CMD安裝方式
#### (1) 安裝 node.js (版本需8.9以上版本)
* 至[官網](https://nodejs.org/en/)下載，步驟一直下一步即可。
* 查看是否安裝完成，完成即會匯出版本號。

node -v
npm -v

#### (2) 安裝VueCli，參考[官網](https://cli.vuejs.org/guide/installation.html)。
* 安裝

npm install -g @vue/cli

* 查看是否安裝完成，完成即會匯出版本號`@vue/cli 版本號`。

vue -V

### 2. Anaconda虛擬環境，安裝方式。
#### (1) 安裝Anaconda
  至[官網](https://www.anaconda.com/products/individual)下載安裝。
#### (2) 創建虛擬環境
  開啟 Anaconda Prompt 輸入以下指令，參考[網址](https://medium.com/python4u/%E7%94%A8conda%E5%BB%BA%E7%AB%8B%E5%8F%8A%E7%AE%A1%E7%90%86python%E8%99%9B%E6%93%AC%E7%92%B0%E5%A2%83-b61fd2a76566)。

conda create --name 虛擬環境名稱 //新建虛擬環境
activate 虛擬環境名稱 //進入虛擬環境

#### (3) 安裝node.js
  依照Anaconda提供的[安裝包](https://anaconda.org/conda-forge/nodejs)操作，只需輸入以下指令。
* 安裝

conda install -c conda-forge nodejs

* 查看是否安裝完成，完成即會匯出版本號。

node -v
npm -v

#### (4) 安裝VueCli。

npm install -g @vue/cli

* 查看是否安裝完成，完成即會匯出版本號`@vue/cli 版本號`。

vue -V

## 創建
  參考[官網](https://cli.vuejs.org/guide/creating-a-project.html)
### 1. 建立vuecli

vue create 欲創建專案資料夾名稱

### 2. 選擇所創建Vue需要支援的功能

按空白鍵選取所需要的項目。


### 3. 使用VScode開啟VueCli
* 將創建資料夾丟進VScode
* 按Ctrl+`，開此終端機。
* 輸入 `npm run serve`


載入連結，成功畫面：


## 補充
####   若在程式撰寫上，選擇較嚴僅的Airbnb撰寫模式的話，可以下載VScode ESLint套件，當成式格式不符合規定時，可以用套件快速修正。


####   修正方式：當程式不符合格式審核時，底下會出現紅線，只要滑鼠靠近紅線，點選快速修復 -> Fix all auto-fixable problems，即可自動修復格式錯誤。