開始使用新的 Vue CLI 3
簡介
Vue JS 由 Evan You 和 234 多名開源社區愛好者創建，在 GitHub 上擁有超過 121,000 顆星，是一個非常先進的用戶界面構建框架。它包含一個平易近人的核心庫，讓開發人員只關注 Web 應用程序的視圖層，以及一個支持庫的生態系統，可幫助您解決大型單頁應用程序的複雜性。
Vue CLI 3 幾個月前由 Vue 團隊發布。本文將帶您完成開始使用 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 版本：
npm uninstall -g vue-cli
然後安裝新的：
npm install -g @vue/cli
圖形用戶界面
Vue CLI 3 附帶的功能之一是 GUI 工具，它是終端的 Web 界面選項，適用於更喜歡圖形界面而不是命令行界面的人。您可以使用此工具創建項目、安裝插件和安裝依賴項。您還可以運行諸如為生產服務提供或構建應用程序等任務。
本文分解了分別使用 CLI 和 GUI 工具開始使用 Vue 的主要部分，它還解決了其他一些事情，例如您目前只能單獨使用 CLI 工具進行的即時原型設計。
開始一個新項目
啟動一個新的Vue項目有兩種方式：
- 圖形用戶界面技術
- 命令行界面技術
圖形用戶界面技術
圖形用戶界面技術涉及使用 GUI 工具通過幾次點擊和選擇來創建一個新項目。
在您的機器上打開終端並運行以下 GUI 命令：
vue ui
它會自動在瀏覽器上的 http://localhost:8000/project/select 上打開 GUI 工具。開始時是這樣的：
要創建一個新項目，請單擊 create 按鈕並看到在同一界面中打開的文件管理器。瀏覽您的（項目）文件，您會注意到之前創建的 Vue 項目上有一個 Vue 標誌（表明它們是 Vue 項目）。選擇您希望在其中創建新應用程序的文件夾，然後單擊在此處創建新項目 頁面上的按鈕。這將帶您完成兩個簡單的註冊階段。
- 詳情： 在這裡，您希望選擇一個項目名稱，選擇一個包管理器以使用 yarn 或 npm。如果文件夾內容已存在，您還可以切換選項以覆蓋文件夾內容。最後，您可以決定是否要為項目創建一個 git 存儲庫，它帶有一個選項，可以選擇您選擇的初始提交消息
- 預設： 預設是插件和配置的關聯。選擇功能後，您可以選擇將其保存為預設，以便您可以在未來的項目中重複使用它，而無需再次重新配置所有內容。預設分為三類：默認預設僅包含 babel 和 eslint 插件以及 Vue 基本配置，自定義預設允許您選擇自己的插件，遠程預設允許您從遠程 git 存儲庫中選擇預設（是的，這是可能的）
幾秒鐘後，您將獲得一個創建的新項目 通知，並在您的應用程序的界面中打開一個項目儀表板。
命令行接口技術
使用 CLI 本身的舊選項仍然存在，但使用了新語法，要創建新項目，您只需在終端上運行以下命令：
vue create vue-test
Vue 測試 是您要構建的應用程序的名稱。此命令會導致一系列提示，這些提示將要求與 GUI 完全相同的內容，但都在終端中。當您回答所有提示並按照您想要的方式配置應用程序時，CLI 會為您構建它。
安裝插件
新的 CLI 是基於插件構建的。 Vue 中的功能甚至第三方功能現在都被標識為插件，新 CLI 使用插件來隨時修改我們項目設置的配置。它們基本上是具有編輯 Webpack 配置的額外能力的依賴項。
圖形用戶界面技術
項目儀表板側邊欄有五個圖標，第二個圖標用於插件。當你點擊它時，你會在本文開頭看到你在註冊階段安裝的插件：eslint、babel 和 cli-service，這是插件工作的服務。
添加新插件很簡單，點擊添加插件 按鈕和插件列表出現，您可以使用搜索欄查詢服務並根據您的搜索詞返回可用插件列表。如果你選擇像 Vuetify 這樣的插件，你會看到一個 install 按鈕，該按鈕會將插件安裝到您的項目中，並自動更改插件的 Webpack 配置。
命令行接口技術
要直接使用 CLI 安裝 Vuetify 插件，請導航到項目目錄並使用 add 命令，如下所示：
vue add Vuetify
這會將 Vuetify 插件安裝到您的 Vue 項目中，並修改插件將影響的所有文件。一些插件帶有導致其安裝的後續提示。在我看來，我認為新 CLI 中實現的插件概念是受到 Angular CLI 的啟發。
安裝依賴項
Vue 中的依賴由主要的 Vue 核心依賴和開發依賴組成。這些可以通過 GUI 和 CLI 技術安裝。
圖形用戶界面技術
項目儀表板側邊欄有五個圖標，第三個圖標用於依賴項。主要部分有 Vue 和核心依賴，dev 依賴包括模板編譯器、eslint dev 依賴等等。
如果您想在項目中安裝 Bootstrap 依賴項以便能夠使用引導類，請單擊 安裝依賴項 按鈕，然後搜索引導程序並單擊安裝 .這將需要幾秒鐘，然後通知您新安裝。
命令行接口技術
要直接使用 CLI 安裝 Bootstrap 依賴項，請導航到項目目錄並使用 install 命令，如下所示：
npm install bootstrap
運行任務
任務就像對我們的 Vue 項目採取行動的命令，它可以是在開發服務器上提供它，或者構建它以用於生產或執行 linting。所有這些任務都可以通過 GUI 和 CLI 工具來完成。
圖形用戶界面技術
項目儀表板側邊欄上的最後一個圖標用於任務。可以看到界面中顯示了以下任務：
- 服務： 這會在 localhost 上的本地開發服務器中為您的應用程序提供服務。它有一個非常直觀的儀表板，顯示錯誤日誌和消息、資產、模塊和使用的依賴項。它具有數據可視化分析器，只需單擊 stop task 即可輕鬆終止任務
- 構建： 該界面看起來與 serve 非常相似，但它在 dist 中縮小並構建了用於生產的應用程序 文件夾
- 皮棉： 此任務使用您在創建應用程序時選擇的 eslint 標準處理 linting
- 檢查： 此任務會檢查您在創建項目時為應用程序設置的已解析 Webpack 配置
命令行接口技術
要直接使用 CLI 運行這些任務，請使用以下語法：
- 服務
npm run serve
- 構建
npm run build
- 皮棉
npm run lint
配置
您可以在配置選項卡中更改您為 Vue 項目設置的原始配置，這是項目儀表板側邊欄上的第四個圖標。
您可以更改目錄位置和 dist 的位置 用於生產的文件夾。您還可以將 CSS 設置與 lint on save 中的 lint 設置一起更改為預處理器。
即時原型製作
您是否曾經想創建單個 Vue 組件而不必創建整個項目？好吧，現在可以使用名為 instant prototyping 的新 Vue CLI 功能來做到這一點 ，它抽象了在任何保存的 .vue 上創建單個組件所需的所有配置 文件。您所要做的就是在您的機器上全局安裝 Vue CLI 服務，您可以這樣做：
npm install -g @vue/cli-service-global
現在安裝該服務後，您可以在計算機上的任何位置創建單個 Vue 組件，其功能與完整的 Vue 項目相同。
創建單個 Vue 組件
打開您選擇的文件夾並創建一個新文件，將其命名為 helloworld.vue，將以下代碼複製到文件中並保存：
// helloword.vue file
<template>
<div class=”hello”>
<h1>{{ msg }}</h1>
<h3>Installed CLI Plugins</h3>
<h3>Essential Links</h3>
<h3>Ecosystem</h3>
</div>
</template>
<script>
export default {
name: ‘HelloWorld’,
props: {
msg: String
}
}
</script>
您可以使用以下命令在開發服務器上運行它：
vue serve helloWorld.vue
這會在你的本地主機上啟動一個 Vue 單個組件，就像一個完整的項目一樣。
結論
我們已經逐步開始使用新的 Vue CLI 3.0 和它附帶的很棒的 GUI 工具。在撰寫本文時，GUI 工具無法通過使用 GUI 工具的即時原型設計在單個組件上創建或運行任務，但這可以在 CLI 本身上完成。希望本指南對您很有幫助，祝您編碼愉快！
插件：LogRocket，用於網絡應用的 DVR
LogRocket 是一個前端日誌記錄工具，可讓您重現問題，就好像它們發生在您自己的瀏覽器中一樣。無需猜測錯誤發生的原因，或要求用戶提供屏幕截圖和日誌轉儲，LogRocket 可讓您重播會話以快速了解問題所在。無論框架如何，它都可以完美地與任何應用程序配合使用，並且具有用於記錄來自 Redux、Vuex 和 @ngrx/store 的額外上下文的插件。
除了記錄 Redux 操作和狀態之外，LogRocket 還記錄控制台日誌、JavaScript 錯誤、堆棧跟踪、帶有標頭 + 正文的網絡請求/響應、瀏覽器元數據和自定義日誌。它還檢測 DOM 以記錄頁面上的 HTML 和 CSS，即使是最複雜的單頁應用程序也能重新創建像素完美的視頻。
免費試用。
新的 Vue CLI 3 入門文章首次出現在 LogRocket 博客上。
