快速上手最新的 Vue CLI 3

翻譯：瘋狂的技術宅
原文： https://blog.logrocket.com/ge...

---

本文首發微信公衆號：前端先鋒
歡迎關注，天天都給你推送新鮮的前端技術文章

---

概要：本文將指導你快速上手 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 版本：

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項目）。選擇要在其中建立新程序的文件夾，而後單擊頁面上的 create new project here按鈕。這將帶你完成兩個簡單的註冊階段。

1. Details：你能夠在此處選擇項目的名稱，選擇 yarn 或 npm 包管理器。你還能夠經過切換選項來覆蓋文件夾的內容（若是已存在）。最後你能夠決定是否要爲項目建立一個 git 存儲庫，它還附帶一個選項來供你選擇初始的提交信息。
2. Presets： Presets 是插件和配置的關聯。選擇功能後，你能夠選擇將其保存爲預設，以便在之後的項目使用，而無需再次從新進行配置。有三類預設：默認預設僅包含 babel 和 eslint 插件以及 Vue 基本配置；自定義預設容許你選擇本身的插件；遠程預設容許你從遠程 git 存儲庫中選擇預設（是的，這是能夠的）

幾秒鐘後，你將得到新項目建立通知，並在你的程序界面中打開項目的 dashboard。

命令行

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

vue create vue-test

其中 Vue-test 是你要構建的程序的名稱。此命令會致使一系列提示，這些提示將要求與 GUI 徹底相同，不一樣的是它們會在終端中進行提示。當你回答全部提示並按照本身但願的方式配置應用程序時，CLI 會爲你構建它。

安裝插件

新的 CLI 構建過程是基於插件的。 Vue 中的功能甚至第三方功能均可以被標識爲插件，新 CLI 使用插件來修改咱們在任什麼時候間點設置的項目的配置。它們基本上是依賴編輯 Webpack 配置的額外功能。

圖形界面

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

添加新插件很簡單，單擊 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 依賴關係等等。

若是要在項目中安裝 Bootstrap 依賴，那麼單擊 install dependency 按鈕，而後搜索 bootstrap 並單擊 install。幾秒鐘後會通知你安裝完畢。

命令行

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

npm install bootstrap

運行任務

任務就像對咱們的 Vue 項目執行自動命令，能夠是在開發服務器上提供的服務，也能夠用於構建生產環境下的程序或執行 linting。全部這些任務均可以經過 GUI 和 CLI 工具完成。

圖形界面

項目 dashboard 側欄上的最後一個圖標用於任務。你能夠看到界面中顯示的如下任務：

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 上完成。我但願本指南可以對你有全部幫助，編碼愉快！

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

歡迎繼續閱讀本專欄其它高贊文章：

• 12個使人驚歎的CSS實驗項目
• 必需要會的 50 個React 面試題
• 世界頂級公司的前端面試都問些什麼
• 11 個最好的 JavaScript 動態效果庫
• CSS Flexbox 可視化手冊
• 從設計者的角度看 React
• 過節很無聊？仍是用 JavaScript 寫一個腦力小遊戲吧！
• CSS粘性定位是怎樣工做的
• 一步步教你用HTML5 SVG實現動畫效果
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現