建立 Vue Cli 3 專案的設定介紹

  • 日期:
  • 留言數:0
  • 標籤:

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

設定範例圖

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

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


vue create <project-name>建立專案後,會出現以下的設定:

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:


✂️ 如果你選了 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 時,就可以直接拿來使用。