# Vue CLI 4

## 專案架構

- webpack 的 config 改在 vue.config.js 配置
- 舊有 webpack 配置，於新版幾乎已經內建，並且選用最佳化的配置，僅部分需要依專案做調整
- 靜態資料移動至 public 目錄

---

## 維護相關

- vue-cli 有提供 `inspect` 指令
- 可以去觀察 webpack 的最終配置
- 可更容易去修改預設配置(透過內建的註解)

- vue-cli-service 指令提供一個 **`--mode`** 可以稍作不同模式下的模擬（不完全一致）
- `build`, `serve`, or `inspect` 皆有

---

## 開發環境

### lint 行為變動
- 時機由 HMR 更改為 `git push` 時檢查
- 優點
- 切換分支時，可降低 HMR 時間(appr. 25% off)
- 保證(沒有特殊行為下) build 之前，lint 不會有 Error
- 缺點
- 無法實時知道目前有無 lint 錯誤
- 可安裝 VSCode 的 extensions: eslint, stylelint 替代原本 HMR 提供的資訊
- 個人稍用後，覺得 `git push` 時機比較 ok
- `git commit` 會拖延專案開發速度，尤其在 `rebase` / `cherry-pick` 等整理節點時

### 指令變動
- yarn run `dev` => **`serve`**
- yarn run `devEnv` => **`devenv`**

- yarn run `lint`, `lint:js`, `lint:css`
- 增加 `stylelint` 檢測
- 拆分 `lint:js` 與 `lint:css`
- 不搭載 auto fix 相關配置
- 因為這些配置更改檔案前，不會檢查目前 git 工作目錄 的狀態，若目前有資料尚未 commit ，則 lint 後，無法分辨哪些是 lint 哪些是 change

---

## 特殊狀況
- 如遇到問題可清除 `node_modules/.cache` 後，再次嘗試