摘要:接下來(lái)會(huì)介紹如何使用快速開發(fā)應(yīng)用。但是因?yàn)槭墙坛?,所以我們點(diǎn)按鈕創(chuàng)建項(xiàng)目。從創(chuàng)建到啟動(dòng),不過(guò)一分鐘的事情,是不是超級(jí)方便快捷呢小特性用戶可以在右側(cè)命令集區(qū)添加自定義命令,所有的命令都一鍵運(yùn)行,你都不需要打開終端了。
前言吐槽
前端的技術(shù)發(fā)展辣么快,對(duì)于前端新手來(lái)說(shuō),我還沒怎么使用 jQuery 開發(fā)界面就要換成Angular & Vue & React & ... 更復(fù)雜的是,用戶還要學(xué)習(xí)一堆復(fù)雜的構(gòu)建工具把頁(yè)面進(jìn)行優(yōu)化優(yōu)化再優(yōu)化。
然而很多前端開發(fā)者并不想把時(shí)間浪費(fèi)在構(gòu)建上,希望專注于頁(yè)面開發(fā)。那么有沒有一套成熟的解決方案幫助用戶節(jié)省學(xué)習(xí)成本,快速開發(fā)應(yīng)用呢?
答案當(dāng)然是有的,如果你是個(gè)初學(xué) Webpack 和 React 這一套生態(tài)體系的人,接下來(lái)我介紹的這個(gè)工具將非常適合你。
主角來(lái)臨注意注意了,非常高效快捷的桌面可視化工具 Nowa 誕生了!
Nowa(Not Only for Web App, but also for anything) 是一個(gè)跨平臺(tái)的可視化 Web 開發(fā)工具,旨在幫助用戶部署環(huán)境,簡(jiǎn)化項(xiàng)目的創(chuàng)建、構(gòu)建、開發(fā)以及調(diào)試流程。
Nowa 是為了解決以下痛點(diǎn):
每次下載或新建項(xiàng)目都要安裝一坨開發(fā)用的依賴,而這些依賴絕大部分都是重復(fù)的,耗時(shí)又占空間;
每個(gè)項(xiàng)目的構(gòu)建任務(wù)配置在自己項(xiàng)目中維護(hù),不方便統(tǒng)一維護(hù)和管理;
構(gòu)建配置對(duì)于很多新手用戶來(lái)說(shuō)還是太繁瑣,迫切需要一個(gè)一站式的解決方案;
項(xiàng)目模板的更新依賴于腳手架的發(fā)布,頻繁更新用戶體驗(yàn)不佳;
希望可以在一個(gè)地方找到項(xiàng)目工程化常用命令及工具;
它內(nèi)置了一整套 Webpack 構(gòu)建體系,用戶無(wú)需安裝成套復(fù)雜的依賴,只需下載安裝即可使用。接下來(lái)會(huì)介紹如何使用 Nowa 快速開發(fā) React 應(yīng)用。
教程有大圖 創(chuàng)建項(xiàng)目初始化安裝需要一些時(shí)間,菊花轉(zhuǎn)完之后會(huì)出現(xiàn)簡(jiǎn)單的歡迎頁(yè):
用戶可以通過(guò)點(diǎn)擊導(dǎo)入按鈕活著拖拽項(xiàng)目導(dǎo)入已有的 Nowa 項(xiàng)目。但是因?yàn)槭墙坛?,所以我們點(diǎn)Create New Project按鈕創(chuàng)建項(xiàng)目。
選擇模板圖片上提供了三個(gè)官方模板,每一個(gè)模板對(duì)應(yīng)一種react開發(fā)場(chǎng)景,用戶可以選擇適合自己的。
Salt & Antdmobile 模板適合開發(fā) H5 應(yīng)用, Uxcore 模板適合開發(fā) Web 應(yīng)用。官方模板不夠用的話,可以添加自定義模板,如果你有優(yōu)秀的模板拿來(lái)秀,請(qǐng)聯(lián)系筆者把它變成官方模板。
我們選擇 Salt 模板進(jìn)行初次開發(fā)。點(diǎn)擊Create按鈕進(jìn)入表單填寫的頁(yè)面,請(qǐng)選擇適合自己的 Npm 源,內(nèi)陸用戶請(qǐng)選擇 taobao。
點(diǎn)擊提交按鈕之后,分分鐘就下載好依賴了, 飛一般的速度,你值得體驗(yàn)!
啟動(dòng)項(xiàng)目依賴安裝結(jié)束之后,頁(yè)面自動(dòng)切換到項(xiàng)目詳情頁(yè)。
如果點(diǎn)擊 Start 按鈕,工具就會(huì)自動(dòng)構(gòu)建項(xiàng)目,用戶都不需要寫復(fù)雜的 Webpack 配置,Nowa 幫你實(shí)現(xiàn)模塊實(shí)時(shí)熱替換。
如果點(diǎn)擊了Compile按鈕,工具會(huì)自動(dòng)打包項(xiàng)目到dist文件夾。
從創(chuàng)建到啟動(dòng),不過(guò)一分鐘的事情,是不是超級(jí)方便快捷呢?
小特性用戶可以在右側(cè)命令集區(qū)添加自定義命令,所有的命令都一鍵運(yùn)行,你都不需要打開終端了。如果覺得英文版看起來(lái)別扭,可以在工具設(shè)置里面切換到中文版。
Nowa 還提供人性化的依賴管理的功能,用戶一眼望盡所有需要更新的依賴,一鍵更新所有安裝,簡(jiǎn)直不要太爽了!
當(dāng)然重點(diǎn)是 Nowa 跨平臺(tái)而且開源~
Windows
Mac
Linux
如果工具用的舒服,請(qǐng)到 Github上賞星星~
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/82504.html
摘要:上手篇介紹上手篇?jiǎng)?chuàng)建項(xiàng)目上手篇工具使用指南上手篇巧用命令集的意思是,其實(shí)筆者第一次接觸到它的時(shí)候,還以為是諾娃的意思,可能是紀(jì)念開發(fā)者的媳婦兒,開個(gè)小玩笑。怎么用請(qǐng)看接下來(lái)的上手篇?jiǎng)?chuàng)建項(xiàng)目。 這個(gè)專題主要是詳細(xì)介紹 Nowa 工具,為此碼字無(wú)數(shù)。 Nowa 上手篇(1)- 介紹 Nowa 上手篇(2)- 創(chuàng)建 React Web 項(xiàng)目 Nowa 上手篇(3)- 工具使用指南 Nowa...
摘要:如果項(xiàng)目之前已經(jīng)存在,會(huì)彈窗提示用戶是否覆蓋安裝。靜靜等待依賴安裝安裝結(jié)束之后,項(xiàng)目會(huì)自動(dòng)導(dǎo)入到左側(cè)的項(xiàng)目列表中。再次點(diǎn)擊停止按鈕,會(huì)結(jié)束對(duì)項(xiàng)目的監(jiān)聽。 本系列文章,不斷更新中... Nowa 上手篇(1)- 介紹 Nowa 上手篇(2)- 創(chuàng)建 React Web 項(xiàng)目 Nowa 上手篇(3)- 工具使用指南 Nowa 上手篇(4)巧用命令集 ... 在看完廢話超多的介紹篇后,歡...
摘要:本系列文章,不斷更新中上手篇介紹上手篇?jiǎng)?chuàng)建項(xiàng)目上手篇工具使用指南上手篇巧用命令集這一篇文章主要是工具的使用指南。創(chuàng)建項(xiàng)目請(qǐng)參考上手篇?jiǎng)?chuàng)建項(xiàng)目導(dǎo)入項(xiàng)目請(qǐng)直接把項(xiàng)目文件夾拖入工具,或者點(diǎn)擊項(xiàng)目列表的文件夾圖標(biāo)。 本系列文章,不斷更新中... Nowa 上手篇(1)- 介紹 Nowa 上手篇(2)- 創(chuàng)建 React Web 項(xiàng)目 Nowa 上手篇(3)- 工具使用指南 Nowa 上手篇(...
摘要:有數(shù)百個(gè)免費(fèi)的庫(kù)出來(lái),為應(yīng)用程序選擇正確的框架變得非常困難。是流行的驅(qū)動(dòng)技術(shù)之一,由于年創(chuàng)建。在這三個(gè)塊中,有幾個(gè)暴露低層接口的綁定。反應(yīng)由,和許多開發(fā)人員和個(gè)人的社區(qū)維護(hù)。誕生于年,是一個(gè)輕量級(jí)的框架。 有數(shù)百個(gè)免費(fèi)的JS庫(kù)出來(lái),為應(yīng)用程序選擇正確的JavaScript框架變得非常困難。一些開發(fā)商最終會(huì)拋棄,而其他開發(fā)者則迅速發(fā)展,并得到廣泛采用。許多開發(fā)人員只知道像jQuery和R...
摘要:為什么我們需要是一個(gè)基于的套件庫(kù),兼容。全面的國(guó)際化支持所有組件的內(nèi)置文案支持國(guó)際化,大部分文案用戶可以主動(dòng)設(shè)置。持續(xù)的功能增強(qiáng)借助社區(qū)和團(tuán)隊(duì)自身的力量,會(huì)在現(xiàn)有基礎(chǔ)上優(yōu)化使用體驗(yàn),增強(qiáng)組件功能,添加更多常用組件來(lái)滿足不同場(chǎng)景的需求。 showImg(https://gw.alicdn.com/tps/TB1TVapKFXXXXbbXpXXXXXXXXXX-1000-500.png);...
閱讀 3531·2021-11-24 09:39
閱讀 789·2019-08-30 14:22
閱讀 3042·2019-08-30 13:13
閱讀 2327·2019-08-29 17:06
閱讀 2928·2019-08-29 16:22
閱讀 1264·2019-08-29 10:58
閱讀 2440·2019-08-26 13:47
閱讀 1639·2019-08-26 11:39