翻譯：瘋狂的技術宅
原文：blog.logrocket.com/getting-sta…
概要：本文將指導你快速上手 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 之前，你應該具備以下條件。
你需要：
npm uninstall -g vue-cli
複製**
npm install -g @vue/cli
複製**
本文分別介紹了使用 cli 和 gui 工具建立 vue 專案，它還解決了目前只能用 cli 工具進行的即時原型設計等其他工作。
有兩種方法可以啟動新的 vue 專案：
使用者圖形介面技術使你通過 gui 工具點選幾次滑鼠就可以建立乙個新專案。
開啟機器上的終端並執行以下gui命令：
vue ui
複製**
要建立新專案，請單擊 create 按鈕，然後在同一介面中檢視開啟的檔案管理器。瀏覽（專案）檔案時，你會注意到先前建立的 vue 專案上有 vue 符號（表示它們是vue專案）。選擇要在其中建立新程式的資料夾，然後單擊頁面上的 create new project here按鈕。這將帶你完成兩個簡單的註冊階段。
**details：**你可以在此處選擇專案的名稱，選擇 yarn 或 npm 包管理器。你還可以通過切換選項來覆蓋資料夾的內容（如果已存在）。最後你可以決定是否要為專案建立乙個 git 儲存庫，它還附帶乙個選項來供你選擇初始的提交資訊。
presets：presets 是外掛程式和配置的關聯。選擇功能後，你可以選擇將其儲存為預設，以便在以後的專案使用，而無需再次重新進行配置。有三類預設：預設預設僅包含 babel 和 eslint 外掛程式以及 vue 基本配置；自定義預設允許你選擇自己的外掛程式；遠端預設允許你從遠端 git 儲存庫中選擇預設（是的，這是可以的）
幾秒鐘後，你將獲得新專案建立通知，並在你的程式介面中開啟專案的 dashboard。
在 cli 命令的使用新語法中，要建立新專案，你只需在終端上執行此命令：
vue create vue-test
複製**
新的 cli 構建過程是基於外掛程式的。 vue 中的功能甚至第三方功能都可以被標識為外掛程式，新 cli 使用外掛程式來修改我們在任何時間點設定的專案的配置。它們基本上是依賴編輯 webpack 配置的額外功能。
專案的 dashboard 側欄有五個圖示，第二個圖示用於外掛程式。當你單擊它時，你將看到在本文開頭註冊階段安裝的外掛程式：eslint、babel 和 cli-service，它是安裝外掛程式時依賴的服務。
新增新外掛程式很簡單，單擊 add plugin 按鈕並顯示外掛程式列表，你可以用搜尋欄進行搜尋。如果你選擇了乙個像 vuetify 這樣的外掛程式，將會看到乙個 install 按鈕，它會將外掛程式安裝到你的專案中，並自動對外掛程式進行 webpack 配置更改。
要直接使用 cli 安裝 vuetify 外掛程式，請切換到專案目錄並使用 add 命令，如下所示：
vue add vuetify
複製**
vue 中的依賴關係由主 vue 核心依賴關係和開發依賴關係構成。這些也可以通過 gui 和 cli 安裝。
專案 dashboard 側邊欄的第三個圖示用於依賴項。主要部分有 vue 和核心依賴關係，dev 依賴關係包括模板編譯器、eslint dev 依賴關係等等。
如果要在專案中安裝 bootstrap 依賴，那麼單擊 install dependency 按鈕，然後搜尋 bootstrap 並單擊 install。幾秒鐘後會通知你安裝完畢。
要直接用 cli 來安裝 bootstrap 依賴，請切換到專案目錄並使用 install 命令，如下所示：
npm install bootstrap
複製**
專案 dashboard 側欄上的最後乙個圖示用於任務。你可以看到介面中顯示的以下任務：
**serve：**這會在 localhost 上的本地開發伺服器中執行你的程式。它有乙個非常直觀的 dashboard，顯示錯誤日誌和訊息、資源，模組和使用的依賴項。它有乙個資料視覺化分析器，只需單擊 stop task 即可輕鬆終止任務
**build：**介面看起來與 serve 非常相似，但它在 dist 資料夾中縮小並構建生產環境下的程式
**lint：**用你在建立應用程式時選擇的 eslint 標準處理 linting
**inspect：**在你建立專案時隱式檢查為應用程式設定的 webpack 配置
要直接通過 cli 執行這些任務，請使用以下語法：
npm run serve
複製**
npm run build
複製**
npm run lint
複製**
你可以更改目錄位置和 dist 資料夾的位置以進行生產環境的發布。還可以將 css 設定更改為預處理器。
你是否想建立單個 vue 元件而不去建立整個專案呢？現在可以用名為instant prototyping的新 vue cli 功能來實現了，它抽象了在已儲存的 .vue 檔案上建立單個元件所需的所有配置。你所要做的就是在自己的機器上全域性安裝 vue cli 服務，可以這樣做：
npm install -g @vue/cli-service-global
複製**
開啟你選擇的資料夾並建立乙個新檔案，將其命名為 helloworld.vue，將下面的**複製到檔案中並儲存：
// helloword.vue file
class=」hello」>
}h1>
installed cli pluginsh3>
essential linksh3>
ecosystemh3>
div>
template>
export
default
}script>
複製**
vue serve helloworld.vue
複製**
我們已經一步步的完成了使用新的 vue cli 3.0 以及附帶的 gui 工具的過程。在撰寫本文時，gui 工具還無法通過 gui 工具的即時原型設計在單個元件上建立或執行任務，但可以在 cli 上完成。我希望本指南能夠對你有所有幫助，編碼愉快！
**於:
vue cli3快速建立專案
先檢查vueb v 和 npm v 下面vuecli安裝成功後，如果vue v報錯的話需要以管理員身份開啟powershell 一 安裝 vue cli 更新到 3.x 之後，vue cli 的包名從 vue cli 改成了 vue cli 如果之前全域性安裝了舊版本的 vue cli 1.x 或 ...
使用Vue CLI 3快速建立專案
首先 vue create ant design vue pro執行命令會顯示兩個選項，1預設，2自定義 我麼選擇自定義 選擇好自定義的外掛程式回車就等待下安裝成功然後進入專案資料夾 cd ant design vue pro我們在開發過程中還會需要用到ant design vue 和操作時間的庫，...
使用 vue cli 3 快速建立 Vue 專案
為了便於 vue 專案的管理，vue 團隊官方開發了 vue cli 工具。本文將帶您使用 vue cli 快速建立乙個 vue 專案。本地安裝 vue cli 使用 npm 全域性安裝 vue cli npm i g vue cli 3.0.0 beta.6 建立專案 執行 vue create ...