快速上手最新的 Vue CLI 3

前端先鋒發表於2019-04-28
Vue

翻譯：瘋狂的技術宅

原文：blog.logrocket.com/getting-sta…

img

概要：本文將指導你快速上手 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
複製程式碼

圖形介面

Vue CLI 3 附帶了一個 GUI 工具，它是終端命令的 Web 介面，適用於喜歡圖形介面而不是命令列的人。你可以用這個工具建立專案、安裝外掛和依賴項，還可以用它執行服務或構建用於生產環境的程式。

img

本文分別介紹了使用 CLI 和 GUI 工具建立 Vue 專案，它還解決了目前只能用 CLI 工具進行的即時原型設計等其他工作。

開始一個新專案

有兩種方法可以啟動新的 Vue 專案：

  • 使用使用者圖形介面
  • 使用命令列

圖形介面

使用者圖形介面技術使你通過 GUI 工具點選幾次滑鼠就可以建立一個新專案。

開啟機器上的終端並執行以下GUI命令：

vue ui
複製程式碼

它會自動開啟瀏覽器並訪問 http://localhost:8000/project/select 上的 GUI 工具。剛開啟時看起來像這樣：

img

要建立新專案，請單擊 create 按鈕，然後在同一介面中檢視開啟的檔案管理器。瀏覽（專案）檔案時，你會注意到先前建立的 Vue 專案上有 Vue 符號（表示它們是Vue專案）。選擇要在其中建立新程式的資料夾，然後單擊頁面上的 create new project here按鈕。這將帶你完成兩個簡單的註冊階段。

  1. **Details：**你可以在此處選擇專案的名稱，選擇 yarn 或 npm 包管理器。你還可以通過切換選項來覆蓋資料夾的內容（如果已存在）。最後你可以決定是否要為專案建立一個 git 儲存庫，它還附帶一個選項來供你選擇初始的提交資訊。
  2. Presets： Presets 是外掛和配置的關聯。選擇功能後，你可以選擇將其儲存為預設，以便在以後的專案使用，而無需再次重新進行配置。有三類預設：預設預設僅包含 babel 和 eslint 外掛以及 Vue 基本配置；自定義預設允許你選擇自己的外掛；遠端預設允許你從遠端 git 儲存庫中選擇預設（是的，這是可以的）

幾秒鐘後，你將獲得新專案建立通知，並在你的程式介面中開啟專案的 dashboard。

img

命令列

在 CLI 命令的使用新語法中，要建立新專案，你只需在終端上執行此命令：

vue create vue-test
複製程式碼

其中 Vue-test 是你要構建的程式的名稱。此命令會導致一系列提示，這些提示將要求與 GUI 完全相同，不同的是它們會在終端中進行提示。當你回答所有提示並按照自己希望的方式配置應用程式時，CLI 會為你構建它。

安裝外掛

新的 CLI 構建過程是基於外掛的。 Vue 中的功能甚至第三方功能都可以被標識為外掛，新 CLI 使用外掛來修改我們在任何時間點設定的專案的配置。它們基本上是依賴編輯 Webpack 配置的額外功能。

圖形介面

專案的 dashboard 側欄有五個圖示，第二個圖示用於外掛。當你單擊它時，你將看到在本文開頭註冊階段安裝的外掛：eslint、babel 和 cli-service，它是安裝外掛時依賴的服務。

img

新增新外掛很簡單，單擊 add plugin 按鈕並顯示外掛列表，你可以用搜尋欄進行搜尋。如果你選擇了一個像 Vuetify 這樣的外掛，將會看到一個 install 按鈕，它會將外掛安裝到你的專案中，並自動對外掛進行 Webpack 配置更改。

命令列

要直接使用 CLI 安裝 Vuetify 外掛，請切換到專案目錄並使用 add 命令，如下所示：

vue add Vuetify
複製程式碼

這會將 Vuetify 外掛安裝到你的 Vue 專案中，並修改外掛將影響的所有檔案。某些外掛附帶了導致其安裝的後續提示。在我看來，我認為在新 CLI 中實現的外掛概念受到了 Angular CLI 的啟發。

安裝依賴項

Vue 中的依賴關係由主 Vue 核心依賴關係和開發依賴關係構成。這些也可以通過 GUI 和 CLI 安裝。

圖形介面

專案 dashboard 側邊欄的第三個圖示用於依賴項。主要部分有 Vue 和核心依賴關係，dev 依賴關係包括模板編譯器、eslint dev 依賴關係等等。

img

如果要在專案中安裝 Bootstrap 依賴，那麼單擊 install dependency 按鈕，然後搜尋 bootstrap 並單擊 install。幾秒鐘後會通知你安裝完畢。

命令列

要直接用 CLI 來安裝 Bootstrap 依賴，請切換到專案目錄並使用 install 命令，如下所示：

npm install bootstrap
複製程式碼

執行任務

任務就像對我們的 Vue 專案執行自動命令，可以是在開發伺服器上提供的服務，也可以用於構建生產環境下的程式或執行 linting。所有這些任務都可以通過 GUI 和 CLI 工具完成。

圖形介面

專案 dashboard 側欄上的最後一個圖示用於任務。你可以看到介面中顯示的以下任務：

img

  1. **Serve：**這會在 localhost 上的本地開發伺服器中執行你的程式。它有一個非常直觀的 dashboard，顯示錯誤日誌和訊息、資源，模組和使用的依賴項。它有一個資料視覺化分析器，只需單擊 stop task 即可輕鬆終止任務
  2. **Build：**介面看起來與 Serve 非常相似，但它在 dist 資料夾中縮小並構建生產環境下的程式
  3. **Lint：**用你在建立應用程式時選擇的 eslint 標準處理 linting
  4. **Inspect：**在你建立專案時隱式檢查為應用程式設定的 Webpack 配置

命令列

要直接通過 CLI 執行這些任務，請使用以下語法：

  • Serve
npm run serve
複製程式碼
  • Build
npm run build
複製程式碼
  • Lint
npm run lint
複製程式碼

配置

你可以在配置選項卡中更改 Vue 專案的原始配置，這是專案 dashboard 側欄上的第四個圖示。

你可以更改目錄位置和 dist 資料夾的位置以進行生產環境的釋出。還可以將 CSS 設定更改為前處理器。

即時原型製作

你是否想建立單個 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>
複製程式碼

可以用以下命令在 dev 伺服器上執行它：

vue serve helloWorld.vue
複製程式碼

這會在本地主機上跑起一個 Vue 單個元件，就像完整專案一樣。

結論

我們已經一步步的完成了使用新的 Vue CLI 3.0 以及附帶的 GUI 工具的過程。在撰寫本文時，GUI 工具還無法通過 GUI 工具的即時原型設計在單個元件上建立或執行任務，但可以在 CLI 上完成。我希望本指南能夠對你有所有幫助，編碼愉快！

歡迎關注公眾號：前端先鋒，獲取更多前端乾貨。

快速上手最新的 Vue CLI 3

相關文章