Vue Cli 可以快速幫 Vue 建立一個完整的系統，但每次建立都有一些設定要調整，為了怕自己忘記，所以簡單將設定紀錄一下～

設定範例圖

如果有人被 google 搜尋騙進來，可以先看一下這篇文章講的東西是不是你想知道的！

▼ 我要分享的是這個設定而已 XD

用 vue create 建立專案後，會出現以下的設定：

Please pick a preset

第一個是讓你選擇專案的環境配置：

• default(babel, eslint): 預設的新專案原型，沒有任何 npm，選擇之後會直接幫你建立專案，後面的都可以略過了 XD。
• Manually select features: 如果希望全部設定都自己手動選擇，就請選這個吧。

如果在建立專案時有儲存設定，未來建新專案時可以在這裡選擇過往的設定，要如何「儲存設定」？這個部分會在後面提到。

Check the features needed for your project

接著選擇在這個專案中會用到的功能，用space多選。

• Babel: JavaScript 轉碼器，可以將 ES6 的程式碼轉為 ES5
• TypeSript: TypeScript 用來補足 JavaScript 在型別上的不足，他有可選的靜態型別，以及支援最新的 ES6 特性
• Progressive Web App (PWA) Support: 是否支援漸進式網頁應用 (PWA)
• Router: Vue 的路由器，可以參考 vue-router
• Vuex: Vue 的狀態管理模式，可以參考 vuex
• CSS Pre-processors: CSS 的預處理器，例如 Less, Sass
• Linter / Formatter: 檢查 Coding Style 與格式化，例如 ESlint
• Unit Testing: 單元測試
• E2E Testing: End to End 測試

想要更瞭解單元測試與 E2E 測試的朋友，可以參考保哥的文章介紹：一次搞懂單元測試、整合測試、端對端測試之間的差異

承上，選好功能後，部分的功能會再詢問更細部的設定。

部分功能介紹

TypeScript

• Use class-style component syntax: 是否要使用 style component 的語法
• Use Babel alongside TypeScript: 是否要用 Babel 轉譯

Router

• Use history mode for router: 是否要開啟 history 模式？
  要使用 history 模式需要後端支援，可以參考：https://router.vuejs.org/zh/guide/essentials/history-mode.html

CSS Pre-processors

• Pick a CSS pre-processor: 選擇你要用的 CSS 預處理器

Linter / Formatter

• Pick a linter / formatter config: 選擇 Coding Style 的規範類型。
• Pick additional lint features: 檢查 Coding Style 時，是要在存檔時檢查？還是 commit 時直接處理？

Unit / E2E Testing

• Pick a unit testing solution: 選擇單元測試的測試方法
• Pick a E2E testing solution: 選擇 E2E 測試的測試方法

• Where do you prefer placing config for Babel, PostCSS, ESLint, etc.: 選擇 Babel, PosCSS, ESLint... 等這些設定檔的存放位置

最後一個選項，則是問你要不要保留以上的設定，下次如果要新建一個 Vue Cli 時，就可以直接拿來使用。