1.官方网站上看文档
官方网站 https://imgcook.taobao.org/
2.下载sketch的插件和demo
3.下载sketch,打开demo,导出demo
4.登录网站,粘贴代码
5.编辑保存模块
6.本地安装imgcook-cli,下载代码到本地
编辑页面示例:
左边选择节点,中间显示模块,右边编辑节点具体设置
生成代码示例:
生成代码问题:
1.非嵌套类名,例如bd最好为box-bd
2.多余样式
3.多余嵌套
response的区别是把px变成了vw
rem的区别是把px变成了rem,但是字体没有变而且有错误的转换,所以实际样式会有问题
总结:
imgcook生成的代码会有一些问题,但是简单的不涉及交互的页面还是可以通过imgcook+手动调整代码实现
对于新同学通过学习生成代码的结构和基础的样式有利于基础学习,通过手动调整代码有利于进一步规范和提高开发页面结构和页面样式的能力