CodeFunÊÇÒ»¿î·Ç³£³öÉ«µÄUIÉè¼Æ¸åÖÇÄÜ»¯ÐγÉÔ´´úÂëµÄÒ»ÖÖÊֶΣ¬CodeFunÄܹ»¾«È·¸´ÔÉè¼Æ¸å£¬ÎÞÐèÔÙ²»¶ÏUI×߲飬½ÚÔ¼Äú´óÁ¿·±ÔÓ¹¤×÷ÖÐÈçÏñ¿ÛÇåÎú¶È¡¢µ÷ºÏÀí²¼¾ÖµÈ¡£
¡¾»ù±¾ÉϽéÉÜ¡¿
CodeFun ÊÇÒ»¿î UI Éè¼Æ¸åÖÇÄÜ»¯ÐγÉÔ´´úÂëµÄÒ»ÖÖÊֶΣ¬Äܽ« Sketch¡¢Photoshop µÄÉè¼Æ¸åÖÇÄÜ»¯×ª»»³ÉÇ°ÃæÔ´´úÂë¡£Ëü×î´óµÄÌØÉ«ÊÇ£º
¾«È·¸´ÔÉè¼Æ¸å£¬ÎÞÐèÔÙ²»¶Ï UI ×ß²é
Äܹ»ÐγÉÈç¼¼Êõ¹¤³Ìʦ±Êдһ°ãµÄ´úÂë
ÔÚÈÕ³£¹¤×÷ÉÏ£¬ÀýÈçÏñ¿ÛÇåÎú¶È¡¢µ÷ºÏÀí²¼¾ÖÕâÖÖ·±ÔÓ¡¢¿ÝÔ﷦ζµÄÁ¦Æø»îÒ²½«»ñµÃºÜ´óµÄ¼õÉÙ£¬ÔÏÈ 8 ÖÓÍ·¹¤×÷Á¿Ö»Ðè 10 À´·ÖÖÓ¼´¿É½øÐС£
ÔÚ¿ªÊ¼Íê×ÔÈ»»·¾³ºó£¬ÏÂÃæ¸ø´ó¼Ò½éÉÜÔõÑùÔÚ 1 ·ÖÖÓÖ®ÄÚ½«Éè¼Æ¸åת»»³É΢ÐÅС³ÌÐòÔ´´úÂë¡£
¿ìËÙÈëÃŵÄʵÀý½Ì³Ì»áÒÔÉÏ´« Sketch Éè¼Æ¸åµÄ²Ù×÷Á÷³Ì×öΪÑù±¾Ïêϸ½éÉÜ¡£PhotoshopÓ¦ÓÃÈí¼þÉÏ´«ÒÔºóÁ÷³ÌÓëSketchÒ»Ñù¡£
CodeFun µÄ²Ù×÷Á÷³Ì½öÓÐ 3 ¸ö½×¶Î£º
ÔÚ Sketch Èí¼þÖÐÉÏ´«Éè¼Æ¸å
ÔÚ CodeFun רÓù¤¾ßÖвéѯ´úÂë
½«²úÉúµÄ´úÂ뿽µ½×ÔÉíÏÖÓеÄÊ©¹¤ÖоͿÉÒÔ
ÉÏ´«Éè¼Æ¸å
ÔØÈëÒ»·Ý Sketch Éè¼Æ¸å£¬ËæºóÈí¼þ²Ëµ¥ÖпªÆô CodeFun Èí¼þÒ³Ãæ¡£
Sketch ²Ëµ¥À¸ gt; Èí¼þ gt; CodeFun gt; ÉÏ´«Éè¼Æ¸å
ÔÚÈí¼þÉϵǼ
¸ù¾ÝÈí¼þ½¨Á¢Ò»¸öÏîÄ¿
ËæºóÑ¡ÔñÏîÄ¿ºÍÉÏ´«Ò³Ãæ¡£
Ñ¡¶¨ÕË»§£¬ÌôÑ¡±ØÐëÉÏ´«µ½ÄÄÒ»¸öÍŶÓÀï
Ñ¡ÔñÏîÄ¿ÊÒÄڿռ䣬±íÃ÷Ïֽ׶ÎÉÏ´«µÄÒ³Ã潫°Ú·ÅÔÚÖ¸¶¨ÐÂÏîÄ¿ÊÒÄڿռ䣬Õâ¶ùÌôѡĬÈÏÉèÖÃ˽ÈË¿Õ¼ä
Ñ¡ÔñÏîÄ¿£¬±íÃ÷Ïֽ׶ÎÉÏ´«µÄÒ³Ã潫·ÅÖõ½Ö¸¶¨ÐÂÏîÄ¿¿Õ¼äÄÚ¾ßÌåÏîÄ¿Ï£¬Õâ¶ùÌôÑ¡¸Õ½¨Á¢µÄ ÑÝÊÔʵÀý ÐÂÏîÄ¿
ÌôÑ¡ÉÏ´«µÄÒ³Ã棬ÄÜÑ¡Ò»ÕÅ»òÉÏ´«ËùÓÐÒ³Ãæ
ÊÂÀýº¬ÓÐ 3 ¸öÒ³Ã棬Õâ¶ùÌôÑ¡¡¾¸ÃÒ³ÃæËùÓлæͼ¹¤¾ß¡¿¡£ ÉÏ´«½áÊøºó£¬µãһϡ¾²éѯÐÂÏîÄ¿¡¿°´¼ü¡£
·µ»Ø CodeFun רÓù¤¾ßÒ³Ã棬¼ûµ½¸Õ¸ÕÉÏ´«µÄÒ³Ãæ¡£
²éѯ´úÂë
ÌôÑ¡Ò»ÕÅÉè¼Æ¸å£¬½øµ½±¦±´ÏêÇé
±¦±´ÏêÇéÕûÌå·Ö³ÉÇ°ºó×óÓÒÈý²¿·Ö
×ó²àÀ¸±íÃ÷Îı¾ÎĵµÊ÷£¬ÏÂÎÄ³Æ DOM Tree£¬¸ÃÊ÷Ðνṹ¸ú HTML µÄÊ÷Ðνṹ±£³ÖÒ»ÖÂ
Öм仰åµØÇø£¬¿ÉÓÃ×÷ÌôÑ¡ÔËØÄ¿±ê
ÓÒÃæÀ¸ÊDZ»Ñ¡½ÚµãÌØÐÔÃæ°å£¬ÓÃÒÔÕ¹ÏÖ¿îʽÌØÐÔ¡¢»¥¶¯ÅäÖò¿¼þÅ䱸
µãһ϶¥¶Ë²Ëµ¥À¸ÓÒÉϽǵIJéѯ´úÂë°´¼ü£¬¿ªÆô´úÂëÃæ°å
´úÂëÃæ°åÖÐĬÈÏÉèÖÃÕ¹ÏÖ 4 ÁУ¬¸÷×ÔÕ¹ÏÖ HTML¡¢CSS¡¢JS ºÍÈ«¾ÖÐÔ¿îʽµÄ´úÂë¡£
µÚÒ»´Î´ò¿ªºó£¬»áĬÈÏÉèÖÃÕ¹ÏÖÉ趨Ãæ°å£¬¼ÙÈç²»×ö¸Ä¶¯£¬ÄÇÑù²éѯ¹ýµÄÊÇС³ÌÐòƽ̨µÄÔÉú´úÂë¡£
ÏȺóµã»÷¸´ÖÆ°´¼ü£¬ºÜÈÝÒ׵ؽ«´úÂ뿽µ½È«ÃæµÄ¼ôÇаåÖС£
»ñµÃ v-for ´úÂë
Õë¶Ô List¡¢Grid À´½²£¬´ó¼ÒÏëµÃµ½µÄ´úÂë×ñÕÕÒ»ÖÖÑ»·ÔÙÉúµÄ·½Ê½£¬¿ÉÒÔ¸ù¾ÝÊý¾Ý³¤¶È¶øÈ«×Ô¶¯×ª±ä£¬¶ø·Ç¾²Ì¬Êý¾ÝÔªËØ·´¸´Æ´½Ó£¬ËùÒÔËüÃÇÔÚ HTML ÉÏÓ¦µ±ÊÇÏà½ü VUE ÖÐ v-for µÄÊéд¡£
CodeFun ¿ÉÒÔÖ§³Öµ¼³ö v-for ·½Ê½£¬ÒÔÒ³ÃæÖÐÏ·½ List ΪÀý×Ó£¬½â¶ÁÔõÑùµÃµ½Ñ»·ÏµÍ³´úÂë¡£
×îÏÈ£¬ÔÚ´úÂëÃæ°åÖеã»÷ÓÒÉϽǵġ¾É趨¡¿°´¼ü£¬¿ªÆô¡¾µ¼³öΪѻ·ÏµÍ³ÁÐ±í¡¿Õâ¸öÑ¡Ï¿ªÆôÕâһȫ¾ÖÐÔÑ¡ÔñÏîºó£¬Ò³ÃæÀï±»¼ÓÉÏ List¡¢Grid ÕâÖÖÑ»·ÏµÍ³Áбí±êÇ©µÄÔËØ£¬Ò²½«Òë³É v-for µÄ·½Ê½¡£
ÏÂÃæΪ±ØÐë v-for µÄµØÇø¼ÓÉÏ List ±êʶ£¬Ñ¡¶¨ List Íâ²ãµÄ View Á¬½Óµã¡£
µãһϠViewport ÓÒÉϽǵġ¾±êʶ¡¿°´¼ü£¬¿ªÆô±êʶÃæ°å£¬È»ºóµã»÷ ¡¾List¡¿ ±êʶ¡£ Ä¿µØÊǰѵØÇø±ê¼ÇΪ List¡£
±£Ö¤Ìí¼Ó±êǩʱ List View Á¬½ÓµãÓ¦µ±ÊDZ»Ñ¡ÖеÄÇé¿ö¡£
±êʶ½áÊøºó£¬List ÇøÓòÄڵĴúÂë±ä³É¸ù¾Ý v-for µÄÊéд¡£
Êý¾Ý°ó¶¨
Ò»¸öÕý³£µÄÁбíÒòÆäÊý¾ÝÐÅÏ¢ÊÇÒÔºóÃæÔØÈëËùµÃµ½µÄ£¬Òò´ËÔÚ HTML ÀïµÄ´úÂëÒ»°ãÊÇÒªÓÃ×Ô±äÁ¿È¥¹ØÁª£¬µ±×Ô±äÁ¿¾ßÌåÄÚÈÝÉý¼¶Ê±£¬Ò³ÃæÕ¹ÏÖµÄЧ¹ûÒ²ÊÇÓë´ËͬʱÉý¼¶¡£
ÏÖ½ñ´úÂëËäÊǸù¾Ý v-for ÑùʽµÄ£¬µ«Àï±ßµÄÕÕƬ¡¢ÎÄ×ÖµÄÐÅÏ¢ÒÀ¾É»¹ÊǾ²Ì¬µÄ¡£
ÏÂÃ棬´ó¼Ò½«ÕâЩ¾²Ì¬Êý¾ÝÔËØ»»³É JS ÀïµÄ¶¯Ì¬ÐÔ×Ô±äÁ¿¡£
×îÏÈ£¬¿ªÆô´úÂëÉ趨Ãæ°å£¬´ò¿ª DataBinding µ¼³ö·½Ê½
ÒòΪ¡¾CSS¡¿Ãæ°åºÍ¡¾È«¾ÖÐÔ¿îʽ¡¿Ãæ°åÔÝʱ²»¿¼ÂÇʹÓã¬ËùÒÔÏȹرÕÏàÆ¥ÅäÕâ¸öÑ¡ÏîÑÚ²ØËûÃÇ¡£
Ñ¡¶¨ List µÄÍâ²ã View£¬µã»÷ Viewport ÓÒÉϽǵġ¾Êý¾Ý°ó¶¨¡¿°´¼ü£¬
Ò³ÃæÓҲ෢ÉúÊý¾Ý°ó¶¨Ãæ°å£¬Ãæ°åչʾµÄÊÇ JS ÖбäÁ¿µÄÃû³Æ£¬Ä¬ÈÏÉèÖÃÇ°ÌáÏÂÒ³ÃæÀïµÄÔËØÈ«ÊǾ²Ì¬µÄ£¬²¢²»ÊÇÔ´×Ô JS ×Ô±äÁ¿£¬Òò´ËÃæ°åÀïÃæµÄÄÚÈÝÈ«ÊÇ¿Õ¡£
Õâ¶ù¶Ô List µØÇøÀïµÄ×Ô±äÁ¿¿ªÕ¹È¡Ãû¡£
ÔÚ List ÓÒ²àµÄÎı¾¿òÖÐÌîºÃ dataList£¬±íÃ÷ÁбíµÄÐÅÏ¢À´×ÔÒ»¸ö½Ð dataList µÄ×Ô±äÁ¿¡£
Áбí×éÔ±ÀﶼÓÐÒ»¸öͼƬ£¬Õâ¶ùÖ»ÐèÒªÌîдµÚÒ»¸ö×éÔ±¾Í¿ÉÒÔ£¬Õâ¶ùÌîºÃËü×Ô±äÁ¿Ãû×Ö½Ð×ö iconImg¡£Ã¿¸ö³ÉÔ±ÉÏ·½¶¼ÊÇÓÐÒ»ÐÐÎı¾£¬±äÁ¿ÃüÃûΪ title£¬×îÖÕÓйØÕÛ¿ÛÓÅ»ÝÔªËر»ÃüÃûΪ discount¡£
ÌîºÃÍê³Éºó£¬µãÒ»ÏÂÓÒÏ·½±£´æ°´Å¥¡£
×é¼þ»¯ amp; ¹¦ÄÜÓÅ»¯
- С³ÌÐò¹Ø¼üÇé¾°¿îʽ¸´Ô
- ÐÂÔö¼ÓÎÄ×Ö»»ÐÐÏû³ýרÓù¤¾ß
- ÐÂÔö¼ÓÉ«µ÷ÆóÒµÊÊÓÃÅ䱸
- ÐÂÔö¼ÓÔËØ¿í¸ß±ÈÑ¡¶¨±íÃ÷
- Ëã·¨ÓÅ»¯ amp; ÄÑÌâÐÞ²¹
- PS Plugin 0.4.3
- Figma Plugin 0.2.2
- ¼°Ê±Éè¼Æ·½°¸ Plugin 0.2.2
- Sketch Plugin 0.9.56
´ó¼Ò¶¼ÖªµÀ»Æ½ðÏÖÔÚ¼±¾çϵø£¬ËùÒԺܶàÈËÒѾ¿ªÊ¼Ê¹ÓûƽðÀ´±£³ÖÆäδÀ´µÄ¼ÛÖµ¡£³´½ðÒ²ÊÇÀí²ÆµÄÒ»Öֺ÷½·¨¡£Ëµµ½²ÆÎñ¹ÜÀí£¬ÎÒÃÇÐèҪһЩרҵµÄ²ÆÎñ¹ÜÀíÈí¼þ¡£ÀàËƻƽðµÄ²ÆÎñ¹ÜÀíÈí¼þÊǹó½ðÊôÊг¡Èí¼þ¡£ÕâÀïÓÐһЩ³£ÓõĺÍÁ÷Ðеġ£¹ó½ðÊô½»Ò×ƽ̨¹©´ó¼ÒÑ¡Ôñ£¬²ÆÎñ¹ÜÀíÊÆÔÚ±ØÐУ¡¶àÌØÈí¼þרÌâΪÄúÌṩ¹ó½ðÊôÐÐÇéÈí¼þ,»Æ½ð°×Òø¹ó½ðÊôÐÐÇéÈí¼þÏÂÔØ,¹ó½ðÊô»Æ½ð½»Ò×Èí¼þ¡£¶àÌØÈí¼þÕ¾Ö»ÌṩÂÌÉ«¡¢ÎÞ¶¾¡¢ÎÞ²å¼þ¡¢ÎÞľÂíµÄ´¿ÂÌÉ«Èí¼þÏÂÔØ¡£
ÓÉÓÚ×Ô¶¯³äÖµÈí¼þ²Ù×÷¼òµ¥£¬·½±ã¸öÈËʹÓ㬿ÉΪÓû§ÊµÏÖ¶àÖնˡ¢¶àÖÜÆÚ¡¢¶à·½Ê½³äÖµ£¬Ê¹Óû§³äÖµ¸ü¼Ó·½±ã£¬ÉîÊܹã´óÓû§µÄϲ°®¡£ÏÖÔÚÓкܶà³äµçÈí¼þ£¬ÄÄÖÖ×Ô¶¯³äµçÈí¼þºÃ£¿ÔÚ±£Ö¤³äµç°²È«µÄÇ°ÌáÏ£¬ÎÒÃÇÏòÄúÍƼöһЩ¸üʵÓᢸüÁ÷ÐеijäµçÈí¼þ¡£¶àÌØÈí¼þרÌâΪÄúÌṩ³äÖµÈí¼þ,Ãâ·ÑÐéÄâ³äÖµÈí¼þÏÂÔØ,×Ô¶¯³äֵƽ̨¡£¶àÌØÈí¼þÕ¾Ö»ÌṩÂÌÉ«¡¢ÎÞ¶¾¡¢ÎÞ²å¼þ¡¢ÎÞľÂíµÄ´¿ÂÌÉ«Èí¼þÏÂÔØ¡£
IDE¿ª·¢¹¤¾ßÊÇÏô±ßΪÄú¿ª·¢µÄÒ»ÖÖIDE¿ª·¢¹¤¾ß£¬°üÀ¨Web IDE¿ª·¢¹¤¾ßºÍJavaIDE¿ª·¢¹¤¾ß¡£ÕâЩ¹¤¾ßÊÇ¿ªÔ´µÄ£¬¿ÉÒÔÔںܴó³Ì¶ÈÉÏ°ïÖú¿ª·¢ÈËÔ±¿ª·¢³ÌÐò¡£¿ª·¢ÈËÔ±¿ÉÒÔ¸ù¾ÝÐèҪѡÔñIDE¿ª·¢¹¤¾ß¡£¶àÌØÈí¼þרÌâΪÄúÌṩide¿ª·¢¹¤¾ß,webÇ°¶Ëide¿ª·¢¹¤¾ß,ide¹¤¾ß¡£¶àÌØÈí¼þÕ¾Ö»ÌṩÂÌÉ«¡¢ÎÞ¶¾¡¢ÎÞ²å¼þ¡¢ÎÞľÂíµÄ´¿ÂÌÉ«Èí¼þÏÂÔØ¡£
¿ÖÁúÓÎÏ·ÕýÖð½¥³ÉΪÓÎÏ·ÖеÄÈÈÃÅ»°Ìâ¡£×îÔçµÄ¾µä¿ÖÁúÓÎÏ·ÊÇ¿ÖÁúΣ»ú¡£ÉÏÊÀ¼Í90Äê´ú×î¾µäµÄÉä»÷ÓÎÏ·Ö®Ò»£¬°ÑÎÒÃÇ´øÈëÁËÒ»¸ö³äÂúÉñÃغͿֲÀµÄ¿ÖÁúÍõ¹ú¡£Èç½ñ£¬¿ÖÁúÓÎÏ·ÒÔ·½ÖÛµÄÉú´æºÍ½ø»¯Îª½Ü×÷¶ø¸´ÐË¡£ÏÂÃæΪÄú´øÀ´×îÓÐȤµÄ¿ÖÁúÓÎÏ·´óÈ«£¬¿ÖÁúµ¥»úÓÎÏ·ÏÂÔØ£¬Ç§Íò²»Òª´í¹ýŶ¶àÌØÈí¼þרÌâΪÄúÌṩ¿ÖÁúÓÎÏ·,¿ÖÁúÓÎÏ·µ¥»úÓÎÏ·,¿ÖÁú³ÔÈËÓÎÏ·¡£¶àÌØÈí¼þÕ¾Ö»ÌṩÂÌÉ«¡¢ÎÞ¶¾¡¢ÎÞ²å¼þ¡¢ÎÞľÂíµÄ´¿ÂÌÉ«Èí¼þÏÂÔØ¡£
DOS¹¤¾ßÏäÊÇÒ»¿îÊÊÓÃÓÚWindows 2000»òÒÔÉÏϵͳµÄ¹¤¾ß£¬¼ÓÉÏ´¿DOSÒýµ¼Ö§³Ö£¬·½±ãÅóÓÑÎÞÐèCD-ROMÈíÅÌÇý¶¯Æ÷£¬È«ÖÐÎÄ´¦Àí£¬ÎªÆÕͨÓû§·þÎñ¡£DOS¹¤¾ßÏ䣬¼ÓÔس£ÓÃDOS¹¤¾ß£¬Ö§³ÖNTFS·ÖÇø£¬Ïòµ¼Ä£Ê½ÏÂÖ§³ÖÖÐÎÄÒýµ¼£¡Ð¡±àÊÕ¼¯ÁËһЩ³£ÓõÄDOS¹¤¾ßÏ乩ÄúÑ¡ÔñºÍʹÓ㡶àÌØÈí¼þרÌâΪÄúÌṩdos¹¤¾ßÏä,°«ÈËdos¹¤¾ßÏä,dos¹¤¾ßÏäʹÓý̡̳£¶àÌØÈí¼þÕ¾Ö»ÌṩÂÌÉ«¡¢ÎÞ¶¾¡¢ÎÞ²å¼þ¡¢ÎÞľÂíµÄ´¿ÂÌÉ«Èí¼þÏÂÔØ¡£