概要：本文將指導你快速上手 Vue CLI 3，包括最新的用戶圖形界面和即時原型制作功能的使用步驟。
介紹
尤雨溪（ Evan You）發(fā)起并創(chuàng)建的 Vue JS ，是一個用于構建用戶界面的非常先進的框架，在 GitHub 上擁有超過 121,000 star螺戳，代碼貢獻者也超過了 234 位 。它包含一個能夠使開發(fā)人員專注于 Web 應用視圖層的核心庫，以及一個支持庫的生態(tài)系統(tǒng)丸氛，可幫助你解決大型單頁應用的復雜性問題。
幾個月前Vue團隊發(fā)布了 Vue CLI 3 著摔。本文將指導你使用Vue CLI 3缓窜，包括新的圖形界面和即時原型設計功能。
開始之前的準備
本文適用于使用 Vue JS 的中級前端開發(fā)人員谍咆，熟悉基本概念和安裝過程禾锤。在開始使用 Vue CLI 3 之前，你應該具備以下條件摹察。
你需要：
Node.js 10.x 及以上恩掷。你可以通過在終端或命令提示符下執(zhí)行 node -v 來驗證是否符合要求
安裝了 Node Package Manager 6.7 或更高版本 (NPM)
代碼編輯器：強烈建議使用Visual Studio Code
在你的計算機上全局安裝 Vue 最新版本
在你的計算機上安裝 Vue CLI 3.0。安裝之前請先卸載舊的 CLI 版本：
npm uninstall -g vue-cli
然后安裝新的：
npminstall -g @vue/cli
圖形界面
Vue CLI 3 附帶了一個 GUI 工具供嚎，它是終端命令的 Web 界面黄娘，適用于喜歡圖形界面而不是命令行的人。你可以用這個工具創(chuàng)建項目克滴、安裝插件和依賴項寸宏，還可以用它運行服務或構建用于生產環(huán)境的程序。
本文分別介紹了使用 CLI 和 GUI 工具創(chuàng)建 Vue 項目偿曙，它還解決了目前只能用 CLI 工具進行的即時原型設計等其他工作氮凝。
開始一個新項目
有兩種方法可以啟動新的 Vue 項目：
使用用戶圖形界面
使用命令行
圖形界面
用戶圖形界面技術使你通過 GUI 工具點擊幾次鼠標就可以創(chuàng)建一個新項目。
打開機器上的終端并運行以下GUI命令：
vue ui
它會自動打開瀏覽器并訪問 http://localhost:8000/project/select 上的 GUI 工具望忆。剛打開時看起來像這樣：
要創(chuàng)建新項目罩阵，請單擊?create?按鈕，然后在同一界面中查看打開的文件管理器启摄。瀏覽（項目）文件時稿壁，你會注意到先前創(chuàng)建的 Vue 項目上有 Vue 符號（表示它們是Vue項目）。選擇要在其中創(chuàng)建新程序的文件夾歉备，然后單擊頁面上的?create new project here按鈕傅是。這將帶你完成兩個簡單的注冊階段。
Details：你可以在此處選擇項目的名稱蕾羊，選擇 yarn 或 npm 包管理器喧笔。你還可以通過切換選項來覆蓋文件夾的內容（如果已存在）。最后你可以決定是否要為項目創(chuàng)建一個 git 存儲庫龟再，它還附帶一個選項來供你選擇初始的提交信息书闸。
Presets：?Presets 是插件和配置的關聯(lián)。選擇功能后利凑，你可以選擇將其保存為預設浆劲，以便在以后的項目使用嫌术，而無需再次重新進行配置。有三類預設：默認預設僅包含 babel 和 eslint 插件以及 Vue 基本配置牌借；自定義預設允許你選擇自己的插件度气；遠程預設允許你從遠程 git 存儲庫中選擇預設（是的，這是可以的）
幾秒鐘后膨报，你將獲得新項目創(chuàng)建通知蚯嫌，并在你的程序界面中打開項目的 dashboard。
命令行
在 CLI 命令的使用新語法中丙躏，要創(chuàng)建新項目择示，你只需在終端上運行此命令：
vuecreatevue-test
其中?Vue-test?是你要構建的程序的名稱。此命令會導致一系列提示晒旅，這些提示將要求與 GUI 完全相同栅盲，不同的是它們會在終端中進行提示。當你回答所有提示并按照自己希望的方式配置應用程序時废恋，CLI 會為你構建它谈秫。
安裝插件
新的 CLI 構建過程是基于插件的。 Vue 中的功能甚至第三方功能都可以被標識為插件鱼鼓，新 CLI 使用插件來修改我們在任何時間點設置的項目的配置拟烫。它們基本上是依賴編輯 Webpack 配置的額外功能。
圖形界面
項目的 dashboard 側欄有五個圖標迄本，第二個圖標用于插件硕淑。當你單擊它時，你將看到在本文開頭注冊階段安裝的插件：eslint嘉赎、babel 和 cli-service置媳，它是安裝插件時依賴的服務。
添加新插件很簡單公条，單擊?add plugin?按鈕并顯示插件列表拇囊，你可以用搜索欄進行搜索。如果你選擇了一個像 Vuetify 這樣的插件靶橱，將會看到一個?install?按鈕寥袭，它會將插件安裝到你的項目中，并自動對插件進行 Webpack 配置更改关霸。
命令行
要直接使用 CLI 安裝 Vuetify 插件传黄，請切換到項目目錄并使用 add 命令，如下所示：
vueadd Vuetify
這會將 Vuetify 插件安裝到你的 Vue 項目中谒拴，并修改插件將影響的所有文件尝江。某些插件附帶了導致其安裝的后續(xù)提示。在我看來英上，我認為在新 CLI 中實現(xiàn)的插件概念受到了 Angular CLI 的啟發(fā)炭序。
安裝依賴項
Vue 中的依賴關系由主 Vue 核心依賴關系和開發(fā)依賴關系構成。這些也可以通過 GUI 和 CLI 安裝苍日。
圖形界面
項目 dashboard 側邊欄的第三個圖標用于依賴項惭聂。主要部分有 Vue 和核心依賴關系，dev 依賴關系包括模板編譯器相恃、eslint dev 依賴關系等等辜纲。
如果要在項目中安裝 Bootstrap 依賴，那么單擊?install dependency?按鈕拦耐，然后搜索 bootstrap 并單擊?install耕腾。幾秒鐘后會通知你安裝完畢。
命令行
要直接用 CLI 來安裝 Bootstrap 依賴杀糯，請切換到項目目錄并使用 install 命令扫俺，如下所示：
npminstall bootstrap
運行任務
任務就像對我們的 Vue 項目執(zhí)行自動命令，可以是在開發(fā)服務器上提供的服務固翰，也可以用于構建生產環(huán)境下的程序或執(zhí)行 linting狼纬。所有這些任務都可以通過 GUI 和 CLI 工具完成。
圖形界面
項目 dashboard 側欄上的最后一個圖標用于任務骂际。你可以看到界面中顯示的以下任務：
Serve：這會在 localhost 上的本地開發(fā)服務器中運行你的程序疗琉。它有一個非常直觀的 dashboard，顯示錯誤日志和消息歉铝、資源盈简，模塊和使用的依賴項。它有一個數(shù)據(jù)可視化分析器太示，只需單擊?stop task?即可輕松終止任務
Build：界面看起來與 Serve 非常相似送火，但它在?dist?文件夾中縮小并構建生產環(huán)境下的程序
Lint：用你在創(chuàng)建應用程序時選擇的 eslint 標準處理 linting
Inspect：在你創(chuàng)建項目時隱式檢查為應用程序設置的 Webpack 配置
命令行
要直接通過 CLI 運行這些任務，請使用以下語法：
Serve
npmrun serve
Build
npmrun build
Lint
npmrun lint
配置
你可以在配置選項卡中更改 Vue 項目的原始配置先匪，這是項目 dashboard 側欄上的第四個圖標种吸。
你可以更改目錄位置和?dist?文件夾的位置以進行生產環(huán)境的發(fā)布。還可以將 CSS 設置更改為預處理器呀非。
即時原型制作
你是否想創(chuàng)建單個 Vue 組件而不去創(chuàng)建整個項目呢坚俗？現(xiàn)在可以用名為?instant prototyping?的新 Vue CLI 功能來實現(xiàn)了，它抽象了在已保存的?.vue?文件上創(chuàng)建單個組件所需的所有配置岸裙。你所要做的就是在自己的機器上全局安裝 Vue CLI 服務猖败，可以這樣做：
npminstall-g@vue/cli-service-global
在安裝了該服務后，你就可以在計算機上的任何位置創(chuàng)建單個 Vue 組件降允，其功能與完整的 Vue 項目相同恩闻。
創(chuàng)建單個Vue組件
打開你選擇的文件夾并創(chuàng)建一個新文件，將其命名為 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 單個組件幢尚，就像完整項目一樣破停。
結論
我們已經(jīng)一步步的完成了使用新的 Vue CLI 3.0 以及附帶的 GUI 工具的過程。在撰寫本文時尉剩，GUI 工具還無法通過 GUI 工具的即時原型設計在單個組件上創(chuàng)建或運行任務真慢，但可以在 CLI 上完成。我希望本指南能夠對你有所有幫助理茎，編碼愉快黑界！
關注公眾號：前端冒險指南，對話框回復關鍵字 “前端必備電子書合集”皂林，免費領取經(jīng)典編程書籍朗鸠。
