小編推薦： Fundebug提供JS、微信小程序、微信小游戲砰嘁，Node.js和Java錯誤監(jiān)控。真的是一個很好用的錯誤監(jiān)控服務(wù)勘究，眾多大佬公司都在使用矮湘。
- 原文: Vue UI: A First Look
- 譯者: Fundebug
本文采用意譯，版權(quán)歸原作者所有
隨著最新的穩(wěn)定版本Vue CLI 3即將發(fā)布口糕，是時候來看看有什么新鮮有趣的特性了板祝。基于整個Vue.js開發(fā)者社區(qū)的反饋而大幅度改良走净，該版本提供了很多以工作流為中心的工具券时。
我想會提升每一位Vue.js的開發(fā)者工作效率的特性就是Vue UI。一個可視化圖形界面方便你去創(chuàng)建伏伯、更新和管理項目的方方面面橘洞。
今天，我會跟你一一介紹Vue UI的beta版本中可用的功能说搅。
開始
首先炸枣，我們確保安裝了最新的Vue CLI。打開Terminal弄唧，輸入：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
你可以使用-V來查看一下剛剛安裝的版本：
vue -V
# 應(yīng)該會輸出下面的結(jié)果
3.0.0-rc.3
為了初始化你的Vue UI适肠，在一個干凈的目錄下輸入：
vue ui
該命令會自動打開你的瀏覽器，你要確保當(dāng)前目錄下沒有其他項目候引，瀏覽器展示的頁面如下：
Vue UI默認(rèn)會顯示第一個Tab侯养，也就是項目管理，你可以很輕松查看當(dāng)前創(chuàng)建的項目澄干。
創(chuàng)建第一個項目
要創(chuàng)建一個新的項目逛揩，點(diǎn)擊中間的"Create"按鈕：
項目創(chuàng)建工具會讓你選擇在哪個目錄下創(chuàng)建(以防萬一，你想在不同的目錄下創(chuàng)建)麸俘；當(dāng)文件夾被選中后辩稽，點(diǎn)擊"Create a new project here"按鈕，然后會進(jìn)入一個步步指導(dǎo)：
為項目選擇一個目錄从媚，選擇你喜歡的項目/包管理器(npm或則yarn)逞泄，然后點(diǎn)擊"Next"：
接下來，你會被要求配置預(yù)裝選項；在大多數(shù)情況下喷众，默認(rèn)的配置足夠使用各谚。本文作為一篇指導(dǎo)文章，我們選擇手動配置侮腹。選擇"Maual"，然后點(diǎn)擊"Next"：
有非常多的選項可以配置稻励；使用Babel父阻、TypeScript；啟用Vue組件Vuex望抽、Vue Router加矛；最后基于你的選擇，會有一個相應(yīng)的附加庫配置：
我選擇使用了一個ESLint和開啟單元測試煤篙，我選擇加Prettier和Jest放到我的技術(shù)棧中斟览，并且當(dāng)我保存/提交代碼的時候自動做Lint。
最后辑奈，點(diǎn)擊"Create Project"苛茂，會提醒你保存當(dāng)前的配置，然后創(chuàng)建項目鸠窗。
當(dāng)項目創(chuàng)建成功以后妓羊，Vue UI會展示該項目配置的所有插件：
在這里，你可以更新插件稍计，安裝新插件躁绸，打開Vue DevTools等等。
添加插件
當(dāng)你的項目創(chuàng)建好后臣嚣，安裝新的插件非常簡單。點(diǎn)擊"Add Plugin"，然后搜索你需要的插件：
你會發(fā)現(xiàn)有些插件標(biāo)記著"Official"蚕涤，那么這些由Vue.js官方開發(fā)噪裕。
選擇你要得插件，然后點(diǎn)擊"install"按鈕：
注意在當(dāng)前的版本下怎虫，你一次只能安裝一個插件弹灭。基于你安裝的插件揪垄，你可能會被要求作出一些對該插件相關(guān)的額外配置穷吮。當(dāng)安裝完畢，你可以切換到"Files changed"頁面饥努，選擇將這些代碼變動提交捡鱼。
最后，我們新安裝的插件已經(jīng)在已安裝插件列表中了：
配置你的項目
Vue UI允許你在項目創(chuàng)建后依然可以修改配置酷愧。點(diǎn)擊左側(cè)第二個配置圖標(biāo)驾诈，然后你就可以看到當(dāng)前的配置：
我們可以輕松修改所有可選項缠诅。我建議你閱讀文檔了解哪些可以修改。
執(zhí)行項目任務(wù)
另一個很有用的功能是Vue UI可以讓你直接執(zhí)行你項目中定義的任務(wù)(npm scripts)乍迄。比如管引，我們要運(yùn)行開發(fā)版本的服務(wù)器：
該界面提供了很多有趣的技術(shù)細(xì)節(jié)，比如包大小闯两、加載時間提示褥伴、詳細(xì)的每一個資源創(chuàng)建耗費(fèi)的時間。如果你想知道更詳細(xì)的信息漾狼，點(diǎn)擊"Analyzer"選項：
如果你想要對應(yīng)用的大小做優(yōu)化重慢，那么你可以用這個工具來分析哪些靜態(tài)資源太大，可以適當(dāng)減小逊躁。
本地化
在早些時候似踱，我們安裝了Vuei18n插件。當(dāng)我們安裝完這個插件稽煤，一個額外的子菜單核芽，提供了我們配置本地化的選項。
當(dāng)我們訪問本地化配置的頁面的時候酵熙，我們會發(fā)現(xiàn)“English"已經(jīng)是默認(rèn)配置狞洋，并且有一個默認(rèn)的例子"hello i18n!"。我們本地化所有的文本绿店，我們需要選擇添加我們要支持的語言吉懊。首先，點(diǎn)擊"Add locale"按鈕：
在本示例中假勿，我們選擇添加法語"fr"借嗽，接下來我們可以將所有的英語都翻譯到對于的法語。
如果我們?nèi)ゲ榭创a转培，我們可以看到對應(yīng)的代碼文件：
你可以看到恶导，雖然還是Beta版本，Vue UI將會是一個非常有用的工具浸须。
關(guān)于Fundebug
Fundebug專注于JavaScript惨寿、微信小程序、微信小游戲删窒、支付寶小程序裂垦、React Native、Node.js和Java線上應(yīng)用實時BUG監(jiān)控肌索。 自從2016年雙十一正式上線蕉拢，F(xiàn)undebug累計處理了10億+錯誤事件，付費(fèi)客戶有Google、360晕换、金山軟件午乓、百姓網(wǎng)等眾多品牌企業(yè)。歡迎大家免費(fèi)試用闸准！
版權(quán)聲明
轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/07/10/vue-ui/
您可能感興趣的
- 你還在等著用戶反饋BUG?
- 如何優(yōu)雅處理前端異常益愈？
- 線上出bug了？別怕夷家，這么定位蒸其！
- 前端錯誤收集（Vue.js、微信小程序）
- Fundebug發(fā)布Vue插件瘾英，簡化BUG監(jiān)控接入代碼
- 30個極大提高開發(fā)效率的VS Code插件
- 10個JavaScript難點(diǎn)
- 10個最佳ES6特性
- 重新思考單元測試
- 不要爭了枣接！技術(shù)選擇沒那么重要
- 用Fundebug插件記錄網(wǎng)絡(luò)請求異常
- 沒有Fundebug不能復(fù)現(xiàn)的BUG
- 黑科技颂暇！Fundebug支持網(wǎng)頁錄屏!
- Vue.js@2.6.10更新內(nèi)置錯誤處機(jī)制缺谴，F(xiàn)undebug同步支持相應(yīng)錯誤監(jiān)控
