---
tags: Vue 實戰班
---

# CLI 環境準備

如果已經有 Node.js 可直接觀看[影音課程](https://courses.hexschool.com/courses/924133/lectures/22459377)，如果沒有可按照本篇文件說明，本篇文件包含：

1. Node.js 安裝說明
2. Vue Cli 影音課程連結
3. 常見錯誤說明

---

## 安裝 Node.js
目前有許多前端開發環境都是基於 Node.js，如 Gulp、Webpack、Parcel...，或是任何主流框架（Vue、React、Angular）的 CLI 也都是基於此服務。本次要介紹的 Vue Cli 自然也不例外。

進入官網安裝 [Node.js](https://nodejs.org/en/)，請打開終端機或命令提示字元，輸入 `node -v` 後按 Enter，看是否有顯示版本號。


> Mac 請按 command+空白鍵，輸入「terminal」打開終端機
> Win 請按 開始 > 執行 > 輸入「cmd」打開命令提示字元
Win10 執行視窗快速鍵為 win + R:



在版本號較新的 Win10 也可在左下搜尋欄輸入 cmd 打開命令提示字元:


請確保 Node.js 在第 9 版以上（官方建議：`8.11.0+`）。

⭐⭐⭐ 🌟🌟🌟 ⭐⭐⭐

# 參考課程說明，安裝 Vue Cli
**Vue Cli 安裝影音教學（時長約 45mins）**：
https://courses.hexschool.com/courses/924133/lectures/22459377

⭐⭐⭐ 🌟🌟🌟 ⭐⭐⭐

---

## 常見除錯說明

### 哪邊可以看到錯誤？

##### Vue ui

當你收到類似如下的 Task error 時。


在 Vue UI 的環境下，可以進入「輸出」的分頁查看到錯誤訊息，通常在 ERROR 上下的區塊則是主要的錯誤提示。


此時建議退出「`vue ui`」的環境，使用純指令來修正遇到的錯誤。

##### 指令環境

運行時會直接看到錯誤提示，通常在 ERROR 上下的區塊則是主要的錯誤提示。


按下 `ctrl + c` 停止目前環境後來進行修正。

### 錯誤：Permission Denied

這是 Mac 中執行全域 `npm` 指令可能會出現的權限不足說明，指令的語句中可能會出現以下字樣 `permission denied`。

> 圖片為示意

此錯誤則需要使用最高權限執行：
1. 使用指令前方加上 `sudo` 字樣，如：`sudo npm install -g @vue/cli`
2. 接下來輸入系統的最高權限密碼

### 錯誤：`colorette' do not define a valid '.'`

主要是套件更新後出現的錯誤，將重新安裝部分套件修正此問題，請在「**專案目錄下**」依序輸入以下兩行。

npm uninstall colorette
npm install colorette@1.2.0

安裝結束後重新運行即可，此錯誤每個專案都可能需要執行一次。

### 錯誤：`npm rebuild node-sass`

Node sass 在目前環境運行失敗，可依據提示輸入 `npm rebuild node-sass`。


此錯誤每個 Node.js 環境通常只要執行一次後就不會再出現。