Vue UI：Vue開發者必不可少的工具

譯者按： Vue.js相關的開發工具越來與好用！

• 原文: 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將會是一個非常有用的工具。