---
# System prepended metadata

title: Vue Cli 介紹&安裝&創建 (6-1)
tags: [6. VueCli, Vue]

---

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

### 介紹
&emsp;&emsp;**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
&emsp;&emsp;至[官網](https://www.anaconda.com/products/individual)下載安裝。
#### (2) 創建虛擬環境
&emsp;&emsp;開啟 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
&emsp;&emsp;依照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
```

## 創建
&emsp;&emsp;參考[官網](https://cli.vuejs.org/guide/creating-a-project.html)
### 1. 建立vuecli
```
vue create 欲創建專案資料夾名稱
```
### 2. 選擇所創建Vue需要支援的功能
![](https://i.imgur.com/XzEsZso.png)

按空白鍵選取所需要的項目。
![](https://i.imgur.com/ag1TZqb.png)

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

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

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

載入連結，成功畫面：

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

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

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


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

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