譯者按： Vue開發工具越來越好用了！
- 原文: Vue UI: A First Look
- 譯者: Fundebug
本文采用意譯，版權歸原作者所有
隨著最新的穩定版本Vue CLI 3即將釋出，是時候來看看有什麼新鮮有趣的特性了。基於整個Vue.js開發者社群的反饋而大幅度改良，該版本提供了很多以工作流為中心的工具。
我想會提升每一位Vue.js的開發者工作效率的特性就是Vue UI。一個視覺化圖形介面方便你去建立、更新和管理專案的方方面面。
今天，我會跟你一一介紹Vue UI的beta版本中可用的功能。
開始
首先，我們確保安裝了最新的Vue CLI。開啟Terminal，輸入：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製程式碼你可以使用-V來檢視一下剛剛安裝的版本：
vue -V
# 應該會輸出下面的結果
3.0.0-rc.3
複製程式碼為了初始化你的Vue UI，在一個乾淨的目錄下輸入：
vue ui
複製程式碼該命令會自動開啟你的瀏覽器，你要確保當前目錄下沒有其他專案，瀏覽器展示的頁面如下：
Vue UI預設會顯示第一個Tab，也就是專案管理，你可以很輕鬆檢視當前建立的專案。
建立第一個專案
要建立一個新的專案，點選中間的"Create"按鈕：
專案建立工具會讓你選擇在哪個目錄下建立(以防萬一，你想在不同的目錄下建立)；當資料夾被選中後，點選"Create a new project here"按鈕，然後會進入一個步步指導：
為專案選擇一個目錄，選擇你喜歡的專案/包管理器(npm或則yarn)，然後點選"Next"：
接下來，你會被要求配置預裝選項；在大多數情況下，預設的配置足夠使用。本文作為一篇指導文章，我們選擇手動配置。選擇"Maual"，然後點選"Next"：
有非常多的選項可以配置；使用Babel、TypeScript；啟用Vue元件Vuex、Vue Router；最後基於你的選擇，會有一個相應的附加庫配置：
我選擇使用了一個ESLint和開啟單元測試，我選擇加Prettier和Jest放到我的技術棧中，並且當我儲存/提交程式碼的時候自動做Lint。
最後，點選"Create Project"，會提醒你儲存當前的配置，然後建立專案。
當專案建立成功以後，Vue UI會展示該專案配置的所有外掛：
在這裡，你可以更新外掛，安裝新外掛，開啟Vue DevTools等等。
新增外掛
當你的專案建立好後，安裝新的外掛非常簡單。點選"Add Plugin"，然後搜尋你需要的外掛：
你會發現有些外掛標記著"Official"，那麼這些由Vue.js官方開發。
選擇你要得外掛，然後點選"install"按鈕：
注意在當前的版本下，你一次只能安裝一個外掛。基於你安裝的外掛，你可能會被要求作出一些對該外掛相關的額外配置。當安裝完畢，你可以切換到"Files changed"頁面，選擇將這些程式碼變動提交。
最後，我們新安裝的外掛已經在已安裝外掛列表中了：
配置你的專案
Vue UI允許你在專案建立後依然可以修改配置。點選左側第二個配置圖示，然後你就可以看到當前的配置：
我們可以輕鬆修改所有可選項。我建議你閱讀文件瞭解哪些可以修改。
執行專案任務
另一個很有用的功能是Vue UI可以讓你直接執行你專案中定義的任務(npm scripts)。比如，我們要執行開發版本的伺服器：
該介面提供了很多有趣的技術細節，比如包大小、載入時間提示、詳細的每一個資源建立耗費的時間。如果你想知道更詳細的資訊，點選"Analyzer"選項：
如果你想要對應用的大小做優化，那麼你可以用這個工具來分析哪些靜態資源太大，可以適當減小。
本地化
在早些時候，我們安裝了Vuei18n外掛。當我們安裝完這個外掛，一個額外的子選單，提供了我們配置本地化的選項。
當我們訪問本地化配置的頁面的時候，我們會發現“English"已經是預設配置，並且有一個預設的例子"hello i18n!"。我們本地化所有的文字，我們需要選擇新增我們要支援的語言。首先，點選"Add locale"按鈕：
在本示例中，我們選擇新增法語"fr"，接下來我們可以將所有的英語都翻譯到對於的法語。
如果我們去檢視程式碼，我們可以看到對應的程式碼檔案：
你可以看到，雖然還是Beta版本，Vue UI將會是一個非常有用的工具。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用！
版權宣告
轉載時請註明作者Fundebug以及本文地址：
blog.fundebug.com/2018/07/10/…