# Vue-cli 專案建立(Vue3)
## vue-cli 安裝
### 步驟
- 步驟一：[安裝node.js](https://hackmd.io/J15xCgcUQCCFi__-e68Tmg)
- 步驟二：終端機 cd 至 要安裝的 資料夾
- 步驟三：使用`@vue/cli`安裝vue-cli
- **window 安裝指令**：`npm install -g @vue/cli`
- **mac 使用指令**：`sudo npm install -g @vue/cli`
- 步驟四：安裝完畢後，確認 vue-cli安裝的版本
查看vue-cl3版本指令：`vue -V`
*(注意：V 必需要是大寫的)*
## 建立 vue-cli專案
### 步驟
- 步驟一：建立新專案
**建立專案指令**：`vue create 專案名稱`
:::spoiler **專案名稱限制及建議**
- **專案名稱不能包含空格或特殊字符**：專案名稱應該是有效的文件夾名稱，因此不能包含空格、特殊字符或特殊符號。建議使用小寫字母、數字、連字符（-）或底線（_）來組成名稱。
- **建議使用短小的名稱**：為了方便記憶和使用，建議專案名稱短小而具有描述性。避免使用過長或複雜的名稱。
- **專案名稱應該是唯一的**：確保專案名稱在你的工作空間中是唯一的，避免與其他專案產生衝突。
- **遵循命名慣例**：遵循標準的命名慣例可以提高代碼的可讀性和一致性。
:::
- 步驟二：安裝過程選 「**Manually select features**」，手動選擇要安裝的功能或模組
- 步驟三：選擇所要安裝的功能及模組
:::spoiler **安裝的功能及模組解說**
- **Babel**：可以將 ES6+ 的語法轉換為 ES5 語法，以確保你的應用程序在廣泛的瀏覽器和環境中運行良好。
- **TypeScript**： Vue 專案中使用 TypeScript 進行開發，是一種靜態類型的 JavaScript 超集，為 JavaScript 添加了類型系統和其他功能，以增強代碼的可讀性、可維護性和可擴展性。
- **Progressive Web App (PWA) Support**：一種使用現代網頁技術開發的應用程式，具有類似於原生應用程式的功能和體驗。透過 PWA，你的網站可以在不同的設備和平台上運行，包括桌面瀏覽器、行動瀏覽器和操作系統。選擇 PWA Support 選項後，Vue CLI 會自動為專案配置和生成一些文件和代碼，以實現以下 PWA 相關功能。
- **Router**：Vue.js 官方提供的路由管理庫，它允許專案在單頁應用程式 (SPA) 中實現客戶端路由功能。使用 Vue Router，可以定義不同路由之間的關係，並實現在不同路由之間的切換。Vue CLI 會自動安裝並設置 Vue Router 相關的依賴項和配置文件，讓專案可以立即開始使用路由功能。
- **Vuex**：Vue.js 官方提供的狀態管理庫，用於管理應用程式的狀態和實現狀態共享，選擇 Vuex 選項後。Vue CLI 會自動安裝並設置 Vuex 相關的依賴項和配置文件，讓專案可以立即開始使用狀態管理功能。
- **CSS Pre-processors** ：CSS 預處理器是一種擴展 CSS 的工具，它提供了一些額外的功能和語法，使專案能夠更有效地編寫和管理 CSS 代碼。
:::
- 步驟四：選擇啟用的Vue版本(3.x)
- 步驟五：選擇是否啟用history
- 默認情況下，Vue Router 使用的是 "hash mode"，也就是 URL 中帶有 # 符號的模式。# 符號後的路徑進行路由匹配，而不會對服務器造成影響。
- 選擇使用 "history mode" 時，路由將不再使用 # 符號，而是直接使用普通的 URL 路徑。URL 看起來更加乾淨，更接近傳統的 URL 格式。
- 步驟六：選擇CSS預處理器
:::spoiler **CSS預處理器解說**
- **Sass/SCSS(with dart-sass)**: Sass是一種 CSS 預處理器，它引入了許多功能和語法糖，使得 CSS 代碼更具可讀性和可維護性。可以選擇使用 Sass（或者 SCSS，Sass 的 CSS-compatible 版本）作為 CSS 預處理器。使用 Sass/SCSS 可以使用變量、巢狀規則、混合等功能，使 CSS 代碼更具結構性和可重用性。
- **Less**: 提供了類似 Sass 的功能，並引入了一些自己的特性。Less 的語法與原生的 CSS 語法非常相似，使得學習和使用更加容易。
- **Stylus**:提供一個簡潔、靈活和強大的語法。Stylus 的語法更加寬鬆，使用縮進代替大括號和分號，使得代碼看起來更簡潔。
:::
- 步驟七：選擇Babel、ESLint 等的配置放至位置
- 步驟八：選擇是否將當前安裝配置保存為一個預設配置，以便在將來的項目中輕鬆重複使用。
- 步驟九：將當前的安裝配置保存為一個自定義的預設配置名稱
- 專案建立成功
## 啟動專案
專案建立成功後可以cd至專案資料夾，在終端機輸入：`npm run serve` 啟動專案(control + c可結束當前啟動中的vue)
### 成功開啟以下畫面代表專案建立成功

## [Vue-cli基本環境建置](https://hackmd.io/FLwpE-mVRvKLrvZBdiecLA?both)

###### 持續更新中！
###### 以上為自學中的筆記如有錯誤，懇請留言指正，感謝！