国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue UI：Vue開發(fā)者必不可少的工具

jsyzchen / 1069人閱讀

摘要：基于整個(gè)開發(fā)者社區(qū)的反饋而大幅度改良，該版本提供了很多以工作流為中心的工具。我想會(huì)提升每一位的開發(fā)者工作效率的特性就是。開始首先，我們確保安裝了最新的。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，付費(fèi)客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。

譯者按： Vue開發(fā)工具越來越好用了！

原文: Vue UI: A First Look

譯者: Fundebug

本文采用意譯，版權(quán)歸原作者所有

隨著最新的穩(wěn)定版本Vue CLI 3即將發(fā)布，是時(shí)候來看看有什么新鮮有趣的特性了。基于整個(gè)Vue.js開發(fā)者社區(qū)的反饋而大幅度改良，該版本提供了很多以工作流為中心的工具。

我想會(huì)提升每一位Vue.js的開發(fā)者工作效率的特性就是Vue UI。一個(gè)可視化圖形界面方便你去創(chuàng)建、更新和管理項(xiàng)目的方方面面。

今天，我會(huì)跟你一一介紹Vue UI的beta版本中可用的功能。

開始

首先，我們確保安裝了最新的Vue CLI。打開Terminal，輸入：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你可以使用-V來查看一下剛剛安裝的版本：

vue -V
# 應(yīng)該會(huì)輸出下面的結(jié)果
3.0.0-rc.3

為了初始化你的Vue UI，在一個(gè)干凈的目錄下輸入：

vue ui

該命令會(huì)自動(dòng)打開你的瀏覽器，你要確保當(dāng)前目錄下沒有其他項(xiàng)目，瀏覽器展示的頁(yè)面如下：

Vue UI默認(rèn)會(huì)顯示第一個(gè)Tab，也就是項(xiàng)目管理，你可以很輕松查看當(dāng)前創(chuàng)建的項(xiàng)目。

創(chuàng)建第一個(gè)項(xiàng)目

要?jiǎng)?chuàng)建一個(gè)新的項(xiàng)目，點(diǎn)擊中間的"Create"按鈕：

項(xiàng)目創(chuàng)建工具會(huì)讓你選擇在哪個(gè)目錄下創(chuàng)建(以防萬一，你想在不同的目錄下創(chuàng)建)；當(dāng)文件夾被選中后，點(diǎn)擊"Create a new project here"按鈕，然后會(huì)進(jìn)入一個(gè)步步指導(dǎo)：

為項(xiàng)目選擇一個(gè)目錄，選擇你喜歡的項(xiàng)目/包管理器(npm或則yarn)，然后點(diǎn)擊"Next"：

接下來，你會(huì)被要求配置預(yù)裝選項(xiàng)；在大多數(shù)情況下，默認(rèn)的配置足夠使用。本文作為一篇指導(dǎo)文章，我們選擇手動(dòng)配置。選擇"Maual"，然后點(diǎn)擊"Next"：

有非常多的選項(xiàng)可以配置；使用Babel、TypeScript；啟用Vue組件Vuex、Vue Router；最后基于你的選擇，會(huì)有一個(gè)相應(yīng)的附加庫(kù)配置：

我選擇使用了一個(gè)ESLint和開啟單元測(cè)試，我選擇加Prettier和Jest放到我的技術(shù)棧中，并且當(dāng)我保存/提交代碼的時(shí)候自動(dòng)做Lint。

最后，點(diǎn)擊"Create Project"，會(huì)提醒你保存當(dāng)前的配置，然后創(chuàng)建項(xiàng)目。

當(dāng)項(xiàng)目創(chuàng)建成功以后，Vue UI會(huì)展示該項(xiàng)目配置的所有插件：

在這里，你可以更新插件，安裝新插件，打開Vue DevTools等等。

添加插件

當(dāng)你的項(xiàng)目創(chuàng)建好后，安裝新的插件非常簡(jiǎn)單。點(diǎn)擊"Add Plugin"，然后搜索你需要的插件：

你會(huì)發(fā)現(xiàn)有些插件標(biāo)記著"Official"，那么這些由Vue.js官方開發(fā)。

選擇你要得插件，然后點(diǎn)擊"install"按鈕：

注意在當(dāng)前的版本下，你一次只能安裝一個(gè)插件。基于你安裝的插件，你可能會(huì)被要求作出一些對(duì)該插件相關(guān)的額外配置。當(dāng)安裝完畢，你可以切換到"Files changed"頁(yè)面，選擇將這些代碼變動(dòng)提交。

最后，我們新安裝的插件已經(jīng)在已安裝插件列表中了：

配置你的項(xiàng)目

Vue UI允許你在項(xiàng)目創(chuàng)建后依然可以修改配置。點(diǎn)擊左側(cè)第二個(gè)配置圖標(biāo)，然后你就可以看到當(dāng)前的配置：

我們可以輕松修改所有可選項(xiàng)。我建議你閱讀文檔了解哪些可以修改。

執(zhí)行項(xiàng)目任務(wù)

另一個(gè)很有用的功能是Vue UI可以讓你直接執(zhí)行你項(xiàng)目中定義的任務(wù)(npm scripts)。比如，我們要運(yùn)行開發(fā)版本的服務(wù)器：

該界面提供了很多有趣的技術(shù)細(xì)節(jié)，比如包大小、加載時(shí)間提示、詳細(xì)的每一個(gè)資源創(chuàng)建耗費(fèi)的時(shí)間。如果你想知道更詳細(xì)的信息，點(diǎn)擊"Analyzer"選項(xiàng)：

如果你想要對(duì)應(yīng)用的大小做優(yōu)化，那么你可以用這個(gè)工具來分析哪些靜態(tài)資源太大，可以適當(dāng)減小。

本地化

在早些時(shí)候，我們安裝了Vuei18n插件。當(dāng)我們安裝完這個(gè)插件，一個(gè)額外的子菜單，提供了我們配置本地化的選項(xiàng)。

當(dāng)我們?cè)L問本地化配置的頁(yè)面的時(shí)候，我們會(huì)發(fā)現(xiàn)“English"已經(jīng)是默認(rèn)配置，并且有一個(gè)默認(rèn)的例子"hello i18n!"。我們本地化所有的文本，我們需要選擇添加我們要支持的語(yǔ)言。首先，點(diǎn)擊"Add locale"按鈕：

在本示例中，我們選擇添加法語(yǔ)"fr"，接下來我們可以將所有的英語(yǔ)都翻譯到對(duì)于的法語(yǔ)。

如果我們?nèi)ゲ榭创a，我們可以看到對(duì)應(yīng)的代碼文件：

你可以看到，雖然還是Beta版本，Vue UI將會(huì)是一個(gè)非常有用的工具。

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件，付費(fèi)客戶有Google、360、金山軟件、百姓網(wǎng)等眾多品牌企業(yè)。歡迎大家免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/07/10/vue-ui/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103349.html

相關(guān)文章

  • 前端必備資源大整理

    摘要：資源不斷更新中。。。主頁(yè)前端工具簡(jiǎn)介雖然不是第一個(gè)任務(wù)執(zhí)行工具，它卻很快成為了最受歡迎的。官方網(wǎng)站網(wǎng)易框架是網(wǎng)易推出的開源前端框架，提供了豐富代碼庫(kù)和插件，可以極大的幫助開發(fā)人員提高開發(fā)效率。 資源不斷更新中。。。 動(dòng)畫庫(kù)1.Animate.css說明：一個(gè)簡(jiǎn)單易用的跨瀏覽器CSS動(dòng)畫庫(kù)。GitHub主頁(yè)： https://github.com/daneden/an... 2.CSSh...

    JiaXinYi 評(píng)論0 收藏0

  • 前端必備資源大整理

    摘要：資源不斷更新中。。。主頁(yè)前端工具簡(jiǎn)介雖然不是第一個(gè)任務(wù)執(zhí)行工具，它卻很快成為了最受歡迎的。官方網(wǎng)站網(wǎng)易框架是網(wǎng)易推出的開源前端框架，提供了豐富代碼庫(kù)和插件，可以極大的幫助開發(fā)人員提高開發(fā)效率。 資源不斷更新中。。。 動(dòng)畫庫(kù)1.Animate.css說明：一個(gè)簡(jiǎn)單易用的跨瀏覽器CSS動(dòng)畫庫(kù)。GitHub主頁(yè)： https://github.com/daneden/an... 2.CSSh...

    CoorChice 評(píng)論0 收藏0

  • 前端必備資源大整理

    摘要：資源不斷更新中。。。主頁(yè)前端工具簡(jiǎn)介雖然不是第一個(gè)任務(wù)執(zhí)行工具，它卻很快成為了最受歡迎的。官方網(wǎng)站網(wǎng)易框架是網(wǎng)易推出的開源前端框架，提供了豐富代碼庫(kù)和插件，可以極大的幫助開發(fā)人員提高開發(fā)效率。 資源不斷更新中。。。 動(dòng)畫庫(kù)1.Animate.css說明：一個(gè)簡(jiǎn)單易用的跨瀏覽器CSS動(dòng)畫庫(kù)。GitHub主頁(yè)： https://github.com/daneden/an... 2.CSSh...

    xuhong 評(píng)論0 收藏0

  • Element 一套優(yōu)雅的 Vue 2 組件庫(kù)是如何開發(fā)的

    摘要：今年的大會(huì)上，受到作者現(xiàn)場(chǎng)開源項(xiàng)目的感染，我們也在現(xiàn)場(chǎng)宣布開源這套基于開發(fā)的組件庫(kù)。一個(gè)文件夾下有所有的官方插件，直到發(fā)現(xiàn)他們用了一個(gè)叫的工具。那么如何寫樣式同時(shí)單獨(dú)發(fā)布的組件如何引用樣式文件也是我們要解決的問題。 showImg(https://segmentfault.com/img/bVDD9H?w=2502&h=1222); 今年的 JSConf 大會(huì)上，受到 gridcont...

    lscho 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<