推薦一個前端必備工具，開發(fā)效率提升200%
本文適合對提高開發(fā)效率有所追求的小伙伴閱讀
歡迎關注前端早茶，與廣東靚仔攜手共同進階～
一、前言
CodeFun官網：
https://code.fun/
二、如何使用
3步：
在 Sketch 插件中上傳設計稿 在 CodeFun 工具中查看代碼 將生成的代碼拷貝到自己已有的工程中即可
三、具體操作
上傳設計稿
成功后會看到如下所示
查看代碼
這里我們可以查看代碼層級
生成多端代碼
示例1
最后可以得到的代碼如下：
微信小程序
"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">美食
自動生成事件
在工具上綁定事件之類的操作，然后自動生成代碼
生成代碼：
import?React?from?'react';
import?{?useHistory?}?from?'react-router-dom';
import?styles?from?'./index.module.css';
export?default?function?Shouye()?{
??const?history?=?useHistory();
??//?關注點在這里
??const?image_18OnClick?=?()?=>?{
????history.goBack();
??};
??const?data?=?{};
??return?(
????${styles['grid-item']}?flex-col?items-center`}>
????
???? ??);
}
單位換算，也是支持的:
當然啦，還有其他功能比如生成v-for綁定數據等等的功能。
不過，廣東靚仔不建議用，畢竟我們是用來提高開發(fā)效率的。
四、小結
關注我，一起攜手進階
如果這篇文章有幫到你，歡迎關注前端早茶，與廣東靚仔攜手共同進階～