###### <p style="text-align: right"> 建立日期：2020-11-13 / 更新日期：2021-02-12</p>

# Vue CLI

###### tags: `Vue.js` `Vue CLI`

## 簡介
* Vue.js 開發的標準工具，基於 Vue.js 進行快速開發的完整系統
* 基於 Webpack 所建置的開發工具
* 便於使用第三方套件（Bootstrap、Vue Router、axios 等等）
* 可運行 Sass、Babel 等編譯工具
* 便於開發 SPA 的網頁工具
* 靠簡單設定，就能搭建開發時常用的環境
* 限制：不便於開發非 SPA 的網頁，此需求可用 CDN 模式

## 安裝
* 檢查是否已安裝 npm、Node.js
* 安裝 Vue CLI

  npm i -g @vue/cli

* 確認是否成功安裝及安裝版本

  vue -V

## 指令
| 指令 | 功能 |
| --- | --- |
| vue --help, vue -h | 列出指令清單 |
| vue creat 專案名稱 | 建立專案 |
| vue init 模板名稱 專案名稱 | 建立專案，舊版本指令，Vue CLI 版本 < 3 |
| vue ui | 啟動 GUI 介面 |

## 資料夾結構
### [2.x 版本](https://hackmd.io/@yuna9068/SyYla49hP "Vue CLI 2.x版本的資料夾結構")

### [3.x 版本](https://hackmd.io/@yuna9068/S18cC45hv "Vue CLI 3.x版本的資料夾結構")

## 3.x 版本與 2.x 版本差異
* 多了 GUI 介面，處理設定檔更加方便，也不用背許多指令
* 預設零配置，直接運行
* 若已安裝過 1.x 或 2.x 的版本，必須先透過指令 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 將舊版本移除
* Node.js 需要 8.9 或更高的版本
* 升級注意事項
* 加入環境變數
* router.js
* 2.x 版本：要先 import component，再填寫到 routes 內的 component
* 3.x 版本：不須事先 import，可以直接在 routes 內的 component 使用箭頭函式 `() => import('./views/xxx.vue')`

## 快速原型開發
* 直接透過 Webpack 編譯 .vue 的檔案
* 通常是運用在小型的專案或是製作雛形時
* 須先 `npm install -g @vue/cli-service-global`

## 參考資料
* [Vue CLI](https://cli.vuejs.org/zh/ "Vue CLI")
* [Vue 出一個電商網站](https://www.udemy.com/course/vue-hexschool/ "Vue 出一個電商網站")