推薦一個前端必備工具，有了它開發(fā)效率提升200%
拒絕重復(fù)工作
前端頁面的構(gòu)建與調(diào)試，是每一個前端人都繞不過去的基本功。但是頁面的構(gòu)建與UI的還原工作往往是重復(fù)且繁雜的，在日常的開發(fā)工作中會占用我們大量的時間和精力。慢慢的，隨著我們每個人技術(shù)水平的不斷提升，頁面的構(gòu)建工作就會成為我們技術(shù)水平提升道路上的一大阻礙。大家都更希望把更多的時間和精力放在業(yè)務(wù)邏輯、功能優(yōu)化、架構(gòu)設(shè)計等等更深一步的前端技術(shù)領(lǐng)域上。所以我作為一名前端技術(shù)團(tuán)隊的管理者，也作為一名前端的開發(fā)人員。下定決心要幫助團(tuán)隊和自身去解決這個痛點。于是我?guī)е@個問題進(jìn)行了一系列的解決方案調(diào)研，直到我遇到了CodeFun。
什么是CodeFun？
先看看官方介紹：CodeFun 是一款 UI 設(shè)計稿智能生成源代碼的工具，可以將 Sketch、Photoshop 的設(shè)計稿智能轉(zhuǎn)換為前端源代碼。總結(jié)起來就是一句話，設(shè)計圖轉(zhuǎn)代碼。我相信大家肯定在日常的開發(fā)工作中都或多或少的接觸過類似的工具。那么CodeFun和其他產(chǎn)品的不同之處是什么？它的優(yōu)勢是什么呢？
入群不定期享福利，優(yōu)先解鎖更多產(chǎn)品權(quán)限！
CodeFun的優(yōu)勢
作為管理者，調(diào)研一款產(chǎn)品，首先要站在團(tuán)隊的角度去衡量。所以經(jīng)過我對CodeFun的使用以及和其他競品的對比，總結(jié)成一句話就是：不管對于團(tuán)隊還是個人CodeFun使用成本極低，輸出質(zhì)量極高
使用成本極低
CodeFun作為一款優(yōu)秀的產(chǎn)品，完美的滿足了設(shè)計師與程序員的各種需求，基本使用已有的開發(fā)和設(shè)計習(xí)慣就可以輕松把設(shè)計圖轉(zhuǎn)換為代碼。
官網(wǎng)入口，立即體驗
簡單的三步操作
只需要三步，就可以輕松獲取到生成的代碼。對于設(shè)計人員來講，不需要改變?nèi)魏卧O(shè)計習(xí)慣，支持了最主流的包括Sketch、Photoshop設(shè)計稿。
cv大法好
對于開發(fā)同學(xué)來說也是遵循之前的設(shè)計圖測量辦法，找到需要的模塊然后CV大法，然后就會驚喜的發(fā)現(xiàn)你想要的“他”都有。
輸出質(zhì)量極高
一款產(chǎn)品是否完美，就是要看它是否能解決你的實際痛點。對于開發(fā)人員來說，通過設(shè)計圖生成的代碼在真實的開發(fā)場景中是否能做到無需二次加工就能直接使用，這是最直接的痛點。很高興的是這一點，CodeFun做到了。
解決多層嵌套問題
設(shè)計圖
層級劃分
我們前端同學(xué)在進(jìn)行頁面構(gòu)建的時候Dom多層嵌套的情況是家常便飯。但是市面上的其他產(chǎn)品對于Dom結(jié)構(gòu)的算法支持遠(yuǎn)遠(yuǎn)不夠。導(dǎo)致輸出的代碼不能直接拿到使用。而我們的CodeFun得益于優(yōu)秀的算法。簡直做到了比人類更懂布局。層級劃分十分細(xì)致合理，遠(yuǎn)超市面上其他產(chǎn)品。真正的做到了不需要二次加工 拿來就可以用的狀態(tài)。
解決多端問題
設(shè)計圖
微信小程序
"grid-item?flex-col?items-center">
??"https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/5eedc9543259190011441867/60c3218d6d32e90012f09dc8/16246145657548603575.png"?class="image_6"?/>
??"decode"?class="text_4">美食
React
import?React?from?'react';
import?styles?from?'./index.module.css';
export?default?function?Shouye()?{
??const?data?=?{};
??return?(
????${styles['grid-item']}?flex-col?items-center`}>
??????????????src="1.png"
????????className={`${styles['image_6']}`}
??????/>
??????${styles['text_4']}`}>美食
???? ??);
}
Vue
"grid-item?flex-col?items-center">
??????src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/5eedc9543259190011441867/60c3218d6d32e90012f09dc8/16246145657548603575.png"
????class="image_6"
??/>
??"text_4">美食
涵蓋了目前的主流前端框架，實用性極強(qiáng)。媽媽再也不用擔(dān)心我會寫好幾套代碼了
一系列貼心實用的優(yōu)秀功能
像素一鍵換算
生成代碼
.grid-item?{
??padding:?7.5px?0;
}
.image_6?{
??width:?45px;
??height:?45px;
}
.text_4?{
??margin-top:?6px;
}
同學(xué)們，告別痛苦的還原像素工作吧
設(shè)置交互行為
自動生成事件
import?React?from?'react';
import?{?useHistory?}?from?'react-router-dom';
import?styles?from?'./index.module.css';
export?default?function?Shouye()?{
??const?history?=?useHistory();
??//?關(guān)注點在這里
??const?image_18OnClick?=?()?=>?{
????history.goBack();
??};
??const?data?=?{};
??return?(
????${styles['grid-item']}?flex-col?items-center`}>
????
???? ??);
}
是不是感覺有點不給基礎(chǔ)前端同學(xué)活路了，就像真的聘請了一個前端工程師一樣
自定義資源路徑
設(shè)置管理圖片也是一個重復(fù)的工作，還好 我有codeFun。
優(yōu)秀案例
上邊給大家介紹到的功能只是CodeFun的冰山一角。下邊我們把視角移到全局，看看CodeFun在復(fù)雜頁面上的表現(xiàn)如何。
案例一
常見的會員頁面，開發(fā)至少占用一天的人力。用CodeFun之后 10幾秒搞定
效果圖
案例二
卡片循環(huán)類型頁面，表現(xiàn)依然優(yōu)秀
甚至幫你寫了循環(huán)的代碼
效果圖
新功能介紹
為了更好的支持團(tuán)隊作戰(zhàn)，CodeFun在10月21日上線了團(tuán)隊協(xié)作功能。
支持多項目管理
鏈接一鍵加入團(tuán)隊
角色管理
這項功能無疑是對團(tuán)隊效率提升的又一大殺器。各位前端管理者們還在等什么？快帶領(lǐng)團(tuán)隊加入進(jìn)來吧，詳情戳下方二維碼了解，提前體驗更多內(nèi)測功能。
end
很高興可以遇到CodeFun這么優(yōu)秀的工具，我已經(jīng)推動我的的團(tuán)隊在進(jìn)行使用了，大家反響很不錯。對于這么一款未來甚至?xí)I(lǐng)前端改革風(fēng)向的產(chǎn)品，我在這里強(qiáng)烈推薦給大家，附官網(wǎng)地址：https://code.fun/。篇幅有限，以上只是介紹了CodeFun產(chǎn)品的一部分。后續(xù)對于CodeFun這款寶藏產(chǎn)品一定會繼續(xù)發(fā)掘。最后，衷心希望CodeFun團(tuán)隊未來能引領(lǐng)前端開發(fā)，帶來一場新的變革。