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

譯者按： 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以及本文地址： https://blog.fundebug.com/2018/07/10/vue-ui/