如何使用Vue CLI 3加速你的開發工作流？

我們很難想象沒有CLI工具的現代Web開發會是怎樣的。它們通過減少重複和繁瑣的任務極大促進和加快了開發工作流程。這就是爲什麼所有現代客戶端開發框架（如Angular、React等）都提供了自己的CLI工具，而Vue.js也不例外。

最新版的Vue CLI 3不僅功能強大、靈活，還提供了完整圖形用戶界面。使用新的Vue CLI及其Vue UI GUI可以更輕鬆地創建新的Vue.js項目。本文將向你展示如何使用Vue CLI以及Vue UI進一步加快你的工作流程。

什麼是Vue CLI？

Vue CLI是一組用於快速原型設計、簡化應用程序搭建和進行高效項目管理的工具。它由三個主要的工具組成：

CLI是一個npm包，通過vue命令提供核心功能。它可以幫我們輕鬆地構建一個新項目（vue create）或者快速創建原始構思（vue serve）。如果我們想要對項目進行更具體和可視化的控制，可以通過運行vue ui命令打開CLI的GUI。
CLI Service是一個開發依賴項（vue-cli-service二進制文件），安裝在使用CLI創建的每個項目中。它可以幫助我們開發項目（vue-cli-service serve）、打包（vue-cli-service build），以及檢查內部Webpack項目的配置（vue-cli-service inspect）。
CLI插件也是npm包，爲項目提供額外的功能。它們的名字以@vue/cli-plugin-（內置插件）或vue-cli-plugin-（社區插件）開頭。我們可以在開發過程中通過vue add命令添加它們。

後面我們將探討上述工具和實用程序的所有細節，但現在先讓我們看看Vue CLI這些強大而靈活的功能。

Vue CLI是一個用於提升Vue.js開發工作流程的全功能系統

Vue CLI憑藉其豐富的功能集，可加速和簡化Vue.js項目開發。讓我們看看它都有哪些功能：

基於插件的架構。Vue CLI完全圍繞插件而構建，所以非常靈活和可擴展。我們可以選擇在項目創建過程中添加哪些內置插件，還可以在創建項目後隨時添加任意數量的插件。
Vue CLI完全可配置、可擴展和可升級。
提供了一系列官方預裝插件，集成了前端生態系統的一流工具（Babel、ESLint、TypeScript、PWA、Jest、Mocha、Cypress和Nightwatch）。
一個默認預設，我們可以在項目創建期間或之後根據我們的需求進行修改。
無需彈出。與React和Angular CLI工具相比，我們可以在創建項目後隨時安全地檢查和調整項目的Webpack配置，無需彈出應用程序並切換到手動配置。
多頁面支持。
無需任何配置即可進行即時原型設計。
不同的構建目標可以生成不同版本的項目——我們可以使用同一個代碼庫構建App、庫或Web組件。
現代模式功能。構建適用於現代瀏覽器的應用程序，同時兼容舊版本的瀏覽器。
一個完整的GUI，可輕鬆創建、更新和管理複雜項目。
UI插件API。Vue UI公開了一個插件API，我們可以用它將自定義功能添加到CLI的GUI版本中。
來自社區的大量有用插件。

Vue CLI入門

首先，我們需要安裝Vue CLI 3。它需要Node.js 8.9+（推薦8.11.0+）才能運行。打開終端或命令提示符，然後運行：

npm install -g @vue/cli

安裝完成後，可以開始使用vue命令。要檢查一切是否正常，可以運行vue --version。它將顯示已安裝的Vue CLI版本。現在，讓我們來看看可以用Vue CLI來做些什麼。

即時原型設計

儘管Vue CLI主要用於處理複雜項目，但我們也可以用它快速、輕鬆地試驗我們的原始想法。可以通過安裝全局Vue CLI服務插件來激活即時原型設計功能：

npm install -g @vue/cli-service-global

從現在開始，我們可以隨意使用vue serve命令。我們使用以下內容創建App.vue文件：

<template>
  <h1>Hello, Vue!</h1>
</template>

然後在同一個目錄運行：

vue serve

這將啓動Vue CLI開發服務器，並在http://localhost8080/上運行該應用程序。當我們使用瀏覽器打開這個地址時，將看到Hello,Vue！。

創建一個新項目

vue create命令通過一個交互式進程來選擇新項目的選項。讓我們運行它，並看看它都有哪些選項。

vue create vuecli-project

使用Vue CLI創建一個新項目

在第一個窗口中，我們被要求選擇一個預設。內置的預設只有一個，也就是默認的。我們將選擇第二個選項，即手動選擇項目所需的功能，然後按Enter繼續。

在下一個窗口中，我們使用箭頭鍵向上或向下導航功能列表，並用空格鍵選擇我們想要的選項。在這裏，除了Babel和Linter/Formatter，我還選擇了Router和Vuex。選擇所需功能後，按Enter繼續。

在下一個窗口中，系統會詢問是否使用Router歷史記錄模式。我按Enter鍵，使用默認值Yes。

在下一個窗口中，我們需要選擇如何配置Linter。我選擇了ESLint + Prettier。

在下一個窗口中，我們選擇何時使用Linter檢查項目。我選擇了Lint on save，也就是每次在保存文件時應用Lint。

在下一個窗口中，我們需要決定如何配置項目。是爲每個功能使用單獨的配置文件，還是在package.json文件中包含所有配置。我更喜歡使用單個配置文件，因此選擇了In package.json選項。

在最後一個窗口中，我們將整個項目配置保存爲一個易於使用的預設，用於未來的項目。預設保存在用戶文件夾的.vuerc文件中。

完成這個過程後，將創建和配置項目，並下載和安裝所需的軟件包。

項目結構

在本節中，我們將查看Vue CLI所創建的內容。

在上面顯示的項目文件夾中，有以下文件和文件夾：

node_modules文件夾包含了應用程序和開發工具所需的包。
public文件夾包含了靜態項目資源文件，這些文件不會被包含在捆綁包中。
src文件夾包含了Vue.js應用程序的所有資源。
.gitignore包含了被排除在Git版本控制之外的文件和文件夾列表。
babel.config.js包含了Babel編譯器的配置。
package.json包含了Vue.js開發所需的包列表以及用於開發工具的命令。
package-lock.json包含了項目所需的軟件包及其依賴項的完整列表。
README.md包含了有關項目的一般性信息。

新創建的src文件夾

現在讓我們仔細看看src文件夾：

在上面顯示的src文件夾中，我們有以下文件和文件夾：

assets文件夾用於放置應用程序所需的靜態資源，這些資源將被包含在捆綁包中。
components文件夾用於放置應用程序的組件。
views文件夾用於放置通過URL路由功能來顯示的組件。
App.vue是根組件。
main.js是創建Vue實例對象的JavaScript文件。
router.js用於配置Vue路由器。
store.js用於配置使用Vuex創建的數據存儲。

更改項目配置

默認項目配置包含了合理的設置，但如果有必要，我們也可以通過在項目文件夾中添加vue.config.js文件或通過向package.json文件添加vue部分來更改這些配置。

我們先試試第一種方法。我們創建一個vue.config.js文件，並在其中添加以下選項：


module.exports = {
  runtimeCompiler: true
}

這樣就可以將組件模板定義爲字符串，而不是使用模板元素。完整的配置選項請訪問Vue CLI Config頁面（https://cli.vuejs.org/config/）。

開發項目

如上所述，Vue CLI Service附帶了三個默認腳本：serve、build和inspect。第一個用於開發過程。我們使用npm run serve命令運行我們的項目：

當我們在瀏覽器中打開應用程序時，應該可以看到以下頁面：

這是Home.vue頁面，它使用了HelloWorld.vue組件。

serve命令將啓動一個基於webpack-dev-server的開發服務器，它提供了熱模塊替換（HMR）功能。這意味着當我們修改並保存組件時，效果會立即反映出來，並且瀏覽器中的頁面也會做出更新。

使用Vue CLI插件爲項目添加新功能

在應用程序開發的某些時候，我們可能需要爲項目添加一些額外的功能，爲此我們需要安裝Vue CLI插件。Vue CLI插件可以修改Webpack配置，並向vue-cli-service注入新命令。要安裝插件，我們需要使用vue add命令。

假設我們想在項目中使用Bootstrap組件，可以使用bootstrap-vue。要安裝這個插件，需要運行：

vue add bootstrap-vue

插件安裝好以後，我們將在src文件夾中找到一個新的插件文件夾，新安裝的插件就在這個文件夾中。

現在，爲了測試插件的功能，我們需要修改About.vue文件：

<template>
  <div class="about">
    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">
        <p>For more information visit website</p>
      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>
    </b-jumbotron>
  </div>
</template>

當我們打開瀏覽器中的“關於”頁面時，應該可以看到頁面已更新，並使用了Bootstrap的樣式：