概要：本文將指導你快速上手 Vue CLI 3，包括最新的用戶圖形界面和即時原型製作功能的使用步驟。
介紹
尤雨溪（ Evan You）發起並創建的 Vue JS ，是一個用於構建用戶界面的非常先進的框架，在 GitHub 上擁有超過 121,000 star，代碼貢獻者也超過了 234 位 。它包含一個能夠使開發人員專注於 Web 應用視圖層的核心庫，以及一個支持庫的生態系統，可幫助你解決大型單頁應用的複雜性問題。
幾個月前Vue團隊發佈了 Vue CLI 3 。本文將指導你使用Vue CLI 3，包括新的圖形界面和即時原型設計功能。
開始之前的準備
本文適用於使用 Vue JS 的中級前端開發人員，熟悉基本概念和安裝過程。在開始使用 Vue CLI 3 之前，你應該具備以下條件。
你需要：
- Node.js 10.x 及以上。你可以通過在終端或命令提示符下執行node -v來驗證是否符合要求
- 安裝了 Node Package Manager 6.7 或更高版本 (NPM)
- 代碼編輯器：強烈建議使用Visual Studio Code
- 在你的計算機上全局安裝 Vue 最新版本
- 在你的計算機上安裝 Vue CLI 3.0。安裝之前請先卸載舊的 CLI 版本：
1npm uninstall -g vue-cli
然後安裝新的：
1npm install -g @vue/cli
圖形界面
Vue CLI 3 附帶了一個 GUI 工具，它是終端命令的 Web 界面，適用於喜歡圖形界面而不是命令行的人。你可以用這個工具創建項目、安裝插件和依賴項，還可以用它運行服務或構建用於生產環境的程序。
本文分別介紹了使用 CLI 和 GUI 工具創建 Vue 項目，它還解決了目前只能用 CLI 工具進行的即時原型設計等其他工作。
開始一個新項目
有兩種方法可以啟動新的 Vue 項目：
- 使用用戶圖形界面
- 使用命令行
圖形界面
用戶圖形界面技術使你通過 GUI 工具點擊幾次鼠標就可以創建一個新項目。
打開機器上的終端並運行以下GUI命令：
1vue ui
它會自動打開瀏覽器並訪問 http://localhost:8000/project/select 上的 GUI 工具。剛打開時看起來像這樣：
要創建新項目，請單擊create按鈕，然後在同一界面中查看打開的文件管理器。瀏覽（項目）文件時，你會注意到先前創建的 Vue 項目上有 Vue 符號（表示它們是Vue項目）。選擇要在其中創建新程序的文件夾，然後單擊頁面上的create new project here按鈕。這將帶你完成兩個簡單的註冊階段。
- Details：你可以在此處選擇項目的名稱，選擇 yarn 或 npm 包管理器。你還可以通過切換選項來覆蓋文件夾的內容（如果已存在）。最後你可以決定是否要為項目創建一個 git 存儲庫，它還附帶一個選項來供你選擇初始的提交信息。
- Presets：Presets 是插件和配置的關聯。選擇功能後，你可以選擇將其保存為預設，以便在以後的項目使用，而無需再次重新進行配置。有三類預設：默認預設僅包含 babel 和 eslint 插件以及 Vue 基本配置；自定義預設允許你選擇自己的插件；遠程預設允許你從遠程 git 存儲庫中選擇預設（是的，這是可以的）
幾秒鐘後，你將獲得新項目創建通知，並在你的程序界面中打開項目的 dashboard。
命令行
在 CLI 命令的使用新語法中，要創建新項目，你只需在終端上運行此命令：
1vue create vue-test
其中Vue-test是你要構建的程序的名稱。此命令會導致一系列提示，這些提示將要求與 GUI 完全相同，不同的是它們會在終端中進行提示。當你回答所有提示並按照自己希望的方式配置應用程序時，CLI 會為你構建它。
安裝插件
新的 CLI 構建過程是基於插件的。Vue 中的功能甚至第三方功能都可以被標識為插件，新 CLI 使用插件來修改我們在任何時間點設置的項目的配置。它們基本上是依賴編輯 Webpack 配置的額外功能。
圖形界面
項目的 dashboard 側欄有五個圖標，第二個圖標用於插件。當你單擊它時，你將看到在本文開頭註冊階段安裝的插件：eslint、babel 和 cli-service，它是安裝插件時依賴的服務。
添加新插件很簡單，單擊add plugin按鈕並顯示插件列表，你可以用搜索欄進行搜索。如果你選擇了一個像 Vuetify 這樣的插件，將會看到一個install按鈕，它會將插件安裝到你的項目中，並自動對插件進行 Webpack 配置更改。
命令行
要直接使用 CLI 安裝 Vuetify 插件，請切換到項目目錄並使用 add 命令，如下所示：
1vue add Vuetify
這會將 Vuetify 插件安裝到你的 Vue 項目中，並修改插件將影響的所有文件。某些插件附帶了導致其安裝的後續提示。在我看來，我認為在新 CLI 中實現的插件概念受到了 Angular CLI 的啟發。
安裝依賴項
Vue 中的依賴關係由主 Vue 核心依賴關係和開發依賴關係構成。這些也可以通過 GUI 和 CLI 安裝。
圖形界面
項目 dashboard 側邊欄的第三個圖標用於依賴項。主要部分有 Vue 和核心依賴關係，dev 依賴關係包括模板編譯器、eslint dev 依賴關係等等。
如果要在項目中安裝 Bootstrap 依賴，那麼單擊install dependency按鈕，然後搜索 bootstrap 並單擊install。幾秒鐘後會通知你安裝完畢。
命令行
要直接用 CLI 來安裝 Bootstrap 依賴，請切換到項目目錄並使用 install 命令，如下所示：
1npm install bootstrap
運行任務
任務就像對我們的 Vue 項目執行自動命令，可以是在開發服務器上提供的服務，也可以用於構建生產環境下的程序或執行 linting。所有這些任務都可以通過 GUI 和 CLI 工具完成。
圖形界面
項目 dashboard 側欄上的最後一個圖標用於任務。你可以看到界面中顯示的以下任務：
- Serve：這會在 localhost 上的本地開發服務器中運行你的程序。它有一個非常直觀的 dashboard，顯示錯誤日誌和消息、資源，模塊和使用的依賴項。它有一個數據可視化分析器，只需單擊stop task即可輕鬆終止任務
- Build：界面看起來與 Serve 非常相似，但它在dist文件夾中縮小並構建生產環境下的程序
- Lint：用你在創建應用程序時選擇的 eslint 標準處理 linting
- Inspect：在你創建項目時隱式檢查為應用程序設置的 Webpack 配置
命令行
要直接通過 CLI 運行這些任務，請使用以下語法：
- Serve
1npm run serve
- Build
1npm run build
- Lint
1npm run lint
配置
你可以在配置選項卡中更改 Vue 項目的原始配置，這是項目 dashboard 側欄上的第四個圖標。
你可以更改目錄位置和dist文件夾的位置以進行生產環境的發佈。還可以將 CSS 設置更改為預處理器。
即時原型製作
你是否想創建單個 Vue 組件而不去創建整個項目呢？現在可以用名為instant prototyping的新 Vue CLI 功能來實現了，它抽象了在已保存的.vue文件上創建單個組件所需的所有配置。你所要做的就是在自己的機器上全局安裝 Vue CLI 服務，可以這樣做：
1npm install -g @vue/cli-service-global
在安裝了該服務後，你就可以在計算機上的任何位置創建單個 Vue 組件，其功能與完整的 Vue 項目相同。
創建單個Vue組件
打開你選擇的文件夾並創建一個新文件，將其命名為 helloworld.vue，將下面的代碼複製到文件中並保存：
1// helloword.vue file
2<template>
3
4{{ msg }}
5Installed CLI Plugins
6Essential Links
7Ecosystem
8
9/<template>
10
可以用以下命令在 dev 服務器上運行它：
1vue serve helloWorld.vue
這會在本地主機上跑起一個 Vue 單個組件，就像完整項目一樣。
結論
我們已經一步步的完成了使用新的 Vue CLI 3.0 以及附帶的 GUI 工具的過程。在撰寫本文時，GUI 工具還無法通過 GUI 工具的即時原型設計在單個組件上創建或運行任務，但可以在 CLI 上完成。我希望本指南能夠對你有所有幫助，編碼愉快！
閱讀更多 前端技術教學分享 的文章
