Vue CLI 3-Overview簡介

Vue CLI 是用來快速開發Vue.js的系統，提供：

• 互動式專案架設--透過 @vue/cli.
• 零設定快速建立雛形--透過 @vue/cli + @vue/cli-service-global.
• 執行時情的相依性(dependency) (@vue/cli-service) :
  • 可升級;
  • 建立在webpack之上;
  • 可透過專案設定檔設定;
  • 可透過plugins擴充
• 官方擴充套件(plugin)整合前端生態系最佳的工具集合.
• 有完整使用者介面GUI來建立及管理Vue.js專案

Vue CLI目標是要成為Vue生態中的標準工具，確保各種build tools可以一起順暢的運作，讓開發者可以專注在app開發而不用花很多時間調整設定，同時保留彈性可以去做細微調整。

#Components of the System系統元件

#CLI

CLI (@vue/cli) 是全域安裝的 npm package ，提供 vue 指令於命令列使用。  透過 vue create 可快速架構新專案，或是透過 vue serve快速為新idea做出雛形。你也可以透過 vue ui使用圖形化介面管理你的專案。

#CLI Service

CLI Service (@vue/cli-service) 是開發相依性(dependency)用@vue/cli建立的專案，都會在本機端安裝的一個npm package

CLI Service是建立於 webpack 及 webpack-dev-server之上，包含：

• 用來載入其他CLI plugin的核心service;
• 優化過的內部 webpack 設定檔(config) ;
•  vue-cli-service binary , 包含基本的 serve, build and inspect 指令

如果你熟悉 create-react-app, @vue/cli-service 大致相當於 react-scripts

 CLI Service 有更詳盡的說明

#CLI Plugins

CLI Plugins 是用來讓你的Vue CLI專案有其他功能的npm packages , 如 Babel/TypeScript 轉譯transpilation, ESLint 整合, 單元測試(unit testing), 及 end-to-end 測試. 很容易就能辨認出  Vue CLI plugin ，因為他們的名稱都會用 @vue/cli-plugin- (內建 plugins) 或 vue-cli-plugin- (社群 plugins)當開頭。

當你執行 vue-cli-service 指令 , 會自動解析及載入專案內package.json上列出的CLI Plugins 。

Plugins可以在專案建立時就加入，或是之後再加入。也可以放在可重複使用的presets中。我們會在 Plugins and Presets章節深入討論。