Posted 灏忓皬椴佺彮鐨勬妧鏈彛琚?/a>

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了相关的知识，希望对你有一定的参考价值。

鍏堣绛旀锛氫笉鏄紝浣嗙粍浠跺簱鍜屽墠绔鏋舵湁鍏崇郴銆傝寰€涓嬬湅

鐩綍

  • 鎴戜滑鍏堟潵涓€氫織鐨勭悊瑙?/p>

  • 甯歌鐨勮璁¤鑼?缁勪欢搴撶殑 鎸夐挳

  • 璁捐鍜屽墠绔悎浣滅殑涓€浜涘熀纭€鐭ヨ瘑

  • 瑙ｇ瓟闂锛氬墠绔父璇寸殑鍓嶇妗嗘灦锛屾槸鎸囧悇绉嶇粍浠跺簱鍚?/p>

  • 瀹為檯宸ヤ綔閬囧埌鐨勪竴浜涘満鏅?/p>


鎴戜滑鍏堟潵涓€氫織鐨勭悊瑙?/h3>

  1. 鍓嶇鍐欎唬鐮侊紝骞叉椿锛屽啓涓氬姟锛屾湁鐐圭被浼?code class="mq-8">绉嶅湴鐨勬劅瑙?鐮佸啘 鍝堝搱鍝堝搱鍝堬紝浣犱负浠€绗戠殑杩欎箞寮€蹇凁煒?

  2. 绉嶅湴闇€瑕佸伐鍏峰鍚с€傝€?Javascript 灏辨槸鐢熼搧鐤欑槱锛屼綘鎷块搧鐤欑槱鍘荤鍦帮紝鏁堢巼寰堜綆銆傚嵆浣跨粰杩欎釜閾佺枡鐦╁寘浜嗗緢婕備寒鐨勯敗绾革紙CSS锛夛紝鏁堢巼杩樻槸寰堜綆銆?/p>

  3. 浜虹兢涓湁涓€浜涜仾鏄庣粷椤剁殑瀹朵紮锛堭煒傦級锛屾兂浜嗕簺鍔炴硶锛屾妸杩欎簺閾佺枡鐦╋紝杩涜浜嗙偧鍖栵紝鎶婁粬浠仛鎴愪簡 鐔熼搧锛圴ue銆丷eact 绛夊紑鍙戞鏋讹級

  4. 浜庢槸鍙堟湁浜虹敤杩欎簺鐔熼搧锛屽仛鎴愪簡鍚勭闆朵欢锛堢粍浠讹級

    1. 杞︾伅锛坆utton锛?/p>

    2. 搴ф锛堣〃鏍硷級

    3. 鍙戝姩鏈猴紙杞挱鍥撅級

    4. 杞瓙锛堟棩鏈熼€夋嫨鍣級

  5. 鎶婅繖浜涢浂浠舵嫾鎺ュ湪涓€璧凤紝灏辨垚浜嗘嫋鎷夋満銆佹苯杞︺€佹敹鍓叉満 锛屾瀬澶ф彁楂樹簡鐢熶骇鏁堢巼銆傝繖閲岀殑鎷栨媺鏈恒€佹苯杞︼紝灏辨槸澶у鐨勫湪宸ヤ綔涓紝鍦?sketch 涓敤鍚勭缁勪欢鍋氱殑 A鍚庡彴锛孊绠＄悊绯荤粺

  6. 鑰屼綘鍦ㄤ娇鐢╯ketch鐨勬椂鍊欙紝浣犵殑鍚屼簨鍙兘浼氶棶浣?

    Hi锛屼綘鐨勬寜閽€佷笅鎷夎彍鍗曞仛鐨勪笉閿欙紝鑳藉垎浜粰鎴戝悧锛焋

    浜庢槸浣犲氨鎶婂畠瀛樻垚涓€涓粍浠跺垎浜粰浣犵殑鍚屼簨浜嗭紝鍚庢潵锛屼綘鍚屼簨鏈夌偣涓嶆兂鏁翠簡锛岀洿鎺ュ拰浣犺锛?/p>

    浣犺繕鑳芥妸鎸夐挳銆佽疆鎾浘銆佽〃鏍笺€佷笅鎷夎彍鍗曘€佹棩鏈熼€夋嫨鍣ㄣ€佸鑸潯 閮藉垎浜粰鎴戝晩锛?/p>

    浣犲拰浠栬

    闃胯タ鍚э紝濂惰尪鎷挎潵锛?/p>

甯歌鐨勮璁¤鑼?缁勪欢搴撶殑 鎸夐挳

  1. material design[1]

  2. bootstrap[2]

  3. element[3]

  4. ant design[4]

  5. sales force[5]

杩欐槸 鎸夐挳鐨勪竴浜涜鑼冿紝鍙互鍙戠幇澶ч儴鍒嗘槸鐩稿悓鐨勩€傝繖鏃跺€欙紝灏卞彲浠ュ彂鐜颁簡锛氬拰sketch绫讳技锛屾棤璁烘槸 PC 绔殑 UI 璁捐杩樻槸绉诲姩绔殑 UI 璁捐锛岄〉闈㈤兘鏄敱姣忎釜妯″潡鎷兼帴缁勬垚锛堝姛鑳界偣缁勬垚锛夈€傝€岃繖浜涙ā鍧楀啀杩涜鎷嗗垎锛屽彂鐜伴兘鍙互鐢变竴浜涘熀纭€缁勪欢鎷兼帴鑰屾垚锛屽熀纭€缁勪欢鍒楄〃涓嶅涔庡涓嬭繖浜涳紝杩欎篃鏄?code class="mq-37">design system 鏋勫缓鐨勫熀纭€銆?/p>

  • [x] Button

  • [x] Icon

  • [x] Dropdown

  • [x] Menu

  • [x] Select

  • [x] Steps

  • [x] Form

  • [x] DatePicker

  • [x] DateRangePicker

  • [x] MonthPicker

  • [x] Checkbox

  • [x] Radio

  • [x] Switch

  • [x] Input

  • [x] Input-Number

  • [x] TextArea

  • [x] Rate

  • [x] Loading

杩欎篃鏄渶杩戝彲鑳芥瘮杈冪伀鐨勮璁＄悊蹇靛惂锛氬師瀛愯璁°€?/p>

浠庡墠绔殑瑙掑害鏉ヨ锛?code class="mq-41">鍘熷瓙璁捐璨屼技鏄竴浠剁悊鎵€褰撶劧鐨勪簨鎯咃紝姣曠珶鎵€鏈夌殑澶т笢瑗块兘鏄潬杩欏皬涓滆タ鎷兼帴鑰屾垚鐨勶紝鎵€浠ュ宸ョ▼甯堟潵璇达紝鍋氬皬涓滆タ鏄垝绠楃殑锛岃繖鏍锋瘮杈冪伒娲?+ 澶嶇敤鎬ф瘮杈冨己锛岃兘澶熷簲瀵规洿澶氱殑鍦烘櫙鍜岄渶姹傘€傝鐧戒簡锛氳繖鏍疯兘澶熸彁楂樺伐浣滄晥鐜囷紝鏂逛究鎵╁睍锛屼篃鑳藉婊¤冻璁捐甯堢殑澶ч儴鍒嗛渶姹?/p>

璁捐鍜屽墠绔悎浣滅殑涓€浜涘熀纭€鐭ヨ瘑

涓嶇煡閬撲綘鏄惁鐭ラ亾锛屽墠绔竴鑸殑寮€鍙戣瑷€涓猴細javascript + CSS + html

鍏朵腑锛?/p>

  1. JavaScript 涓轰富锛岃礋璐ｄ氦浜掗€昏緫 + 涓氬姟閫昏緫

  2. CSS璐熻矗鏍峰紡锛岀敤鏉ヨ礋璐ｈ楗伴〉闈㈡槸鍚︾編瑙?/p>

  3. HTML 鏈€娆′箣锛岀敤鏉ヨ礋璐ｆ暣浣撻鏋讹紙鍙互蹇界暐锛?/p>

鍓嶇宸ョ▼甯?0%鐨勬椂闂存槸鍜孞avaScript鎵撲氦閬撶殑(涓汉缁忛獙涔嬭皥)

  1. 鍏朵腑浠?JavaScript 涓轰富锛孋SS 涓鸿緟锛?HTML  鏈€娆′箣(涓汉鐪嬫硶)

  2. 澶у鍦ㄥ紑鍙戠殑杩囩▼涓紝涓€浜涗笟鐣屽ぇ鐗涗笉鍏夋妧鏈緢鍘夊锛屾€濇兂涔熷緢鍘夊锛屾瘮濡俆witter 鐨勪袱浣嶏紝涓€浣嶅墠绔伐绋嬪笀 + 涓€浣嶈璁″笀锛屽彂鐜癟witter鐨勫緢澶氬湴鏂归兘鐢ㄥ埌浜嗘牱寮忕浉鍚岀殑

    1. 鎸夐挳锛堥潤鎬佺殑锛屽亸鍚戜簬闈欐€侊紝澶氭暟鍙槸灞曠ず浣跨敤锛岋級

    2. 鍗＄墖銆佸鑸潯绛夌瓑锛岃繖浜涢兘鏄浉瀵瑰亸闈欐€佺殑

  3. 闄や簡杩欎簺闈欐€佺殑锛岃繕鏈変竴浜涗笉鍏夋牱寮忕浉鍚岋紝杩樻湁涓€浜涗氦浜掍篃寰堢浉浼肩殑锛屾瘮濡傦細

    1. 琛ㄦ牸

    2. 涓嬫媺鑿滃崟

    3. 杞挱鍥?/p>

    4. 鐙珛浜庨〉闈箣涓婏紝涓棿鏄竴涓煩褰㈢殑鍖哄煙锛岀敤浜庢搷浣滐紝鍥涘懆鏄亸鍚戜簬閫忔槑鐨勯粦鑹诧紙鏍峰紡缁熶竴锛?/p>

    5. 鐐瑰嚮涓棿鐨勫尯鍩熺殑鍙栨秷銆佹垨鑰呭彸涓婅鐨勫叧闂€佹垨鑰呮寜閿洏鐨?Esc 閮戒細鍏抽棴杩欎釜寮规锛堜氦浜掔粺涓€锛?/p>

    6. 寮圭獥锛坢odal锛?/p>

  4. 浠ヤ笂杩欎簺锛屽湪闀挎湡鐨勯」鐩紨杩涜凯浠ｈ繃绋嬩腑锛孴witter鐨勪袱浣嶅彂鐜帮紝杩欎簺涓滀笢閮藉彲浠ヨ繘琛屾娊璞★紝鎶婁笉鍚屽钩鍙扮殑寮规銆?code class="mq-62">琛?/code>鏍笺€?code class="mq-63">涓嬫媺鑿滃崟銆?code class="mq-64">杞挱鍥?/code>鐨?code class="mq-65">鏍峰紡鍜?code class="mq-66">浜や簰杩涜灏介噺缁熶竴锛岀粡杩囪凯浠ｅ拰婕旇繘銆傛湁涓€澶╋紝鏈変竴涓彨Bootstrap 鐨勪笢涓滈棶涓栦簡

瑙ｇ瓟闂锛氬墠绔父璇寸殑鍓嶇妗嗘灦锛屾槸鎸囧悇绉嶇粍浠跺簱鍚?/h3>

  1. 鍓嶇璇寸殑缁勪欢搴擄細鏄寚鍦ㄥ悇澶?code class="mq-70">Design System鐨勬寚瀵间笅锛岄€氳繃鏌愮鍓嶇妗嗘灦杩涜寮€鍙戣惤鍦扮殑涓滀笢銆?/p>

  2. 鏈夌偣鍦ㄩ┈鍏嬫€濅富涔夌殑寮曞涓嬶紝杩涜绀句細涓讳箟寤鸿鐨勬劅瑙夈€?/p>

  3. Design System === 鍓嶇UI 鐨勮璁¤鑼?/p>

  4. 杩欓噷鐨勫墠绔鏋讹紝鐜板湪澶氭暟鎸囩殑鏄?Vue銆?code class="mq-74">React銆?code class="mq-75">Angular 杩欎笁涓富娴佸紑鍙戞鏋朵簡

  5. 杩欑畻鏄紑鍙戝眰闈㈢殑涓滆タ浜嗭紝鍜岃璁″笀鍚屽涔熸槸鏈夊叧绯荤殑锛堝叧绯讳笉澶э紝浣嗕簡瑙ｈ繖浜涘紑鍙戣瑷€ 鍜?璁捐甯堜箣闂寸殑鍏崇郴锛屽彲鑳芥洿濂斤級

杩欓噷鐨?鍦?Design System 鎸囧涓嬶紝杩涜寮€鍙戣惤鍦帮紝涓€鑸槸闇€瑕佹寚瀹氫竴绉嶅墠绔鏋剁殑

鎰忓懗鐫€锛?/p>

  1. 鍏跺搴旂殑寮€鍙戣€呬紬澶氾紝浼椾汉鎷炬煷鐏劙楂?/code>锛屾瘮濡傚浗鍐呬娇鐢?Vue銆?code class="mq-83">React 鐨勬瘮杈冨銆?/p>

  2. 涔熷氨鏄锛屽湪鏌愪釜璁捐瑙勮寖(姣斿Material Design) + 鍓嶇妗嗘灦(姣斿React) 瀵瑰簲鐨?code class="mq-86">缁勪欢搴?/code>浼氭洿瀹屽杽

  3. 濡傛灉鏈変簡bug锛屼慨澶嶇殑鏃堕棿鍜屾晥鐜囦篃鏇撮珮

瀹為檯宸ヤ綔閬囧埌鐨勪竴浜涘満鏅?/h3>

杩欓噷鐨?鍦?Design System 鎸囧涓嬶紝杩涜寮€鍙戣惤鍦帮紝涓€鑸槸闇€瑕佹寚瀹氫竴绉嶅墠绔鏋剁殑銆傛瘮濡傚浗鍐呬娇鐢?Vue銆丷eact 鐨勬瘮杈冨锛屼篃灏变唬琛ㄧ潃鍏跺搴旂殑寮€鍙戣€呬紬澶氾紝浼椾汉鎷炬煷鐏劙楂橈紝涔熷氨鏄锛屻€婅繖浜涘紑鍙戣瑷€ + 鏌愪釜璁捐瑙勮寖銆嬬殑缁勪欢搴撲細鏇村畬鍠勶紝鏈変簡bug锛宖ix 鐨勬晥鐜囦篃鏇撮珮

鍥炲埌杩欓噷锛屽湪鍐冲畾鍋氳璁＄涔嬪墠涔嬪墠锛屽彲浠ユ壘浣犱滑鐨勫伐绋嬪笀闂笅锛屼粬浠敤鐨勭粍浠跺簱鏄粈涔堬紵杩欎釜缁勪欢搴撹儗鍚庣殑璁捐鍥㈤槦锛屾湁娌℃湁瀵瑰杈撳嚭 Sketch 鏂囦欢

鎹垜鎵€鐭ワ紝鍥藉唴鐨?楗夸簡涔圲ED銆佽殏铓侀噾鏈峌ED 浼氫骇鍑猴細璁捐瑙勮寖 + Sketch + 鍦ㄨ璁¤鑼冩寚瀵间笅鐨勶紝浠ｇ爜缁勪欢搴?/code>

鐗瑰埆鏄湪浣犱滑椤圭洰宸茬粡閲囩敤涓€浜涚粍浠跺簱鎴栬€呮鏋剁殑鍓嶆彁涓嬶紝鏈€濂芥彁鍓嶆矡閫氥€傚惁鍒欏彲鑳戒細鍑虹幇锛氬紑鍙戜細鎶楁嫆浣犺璁＄殑鏂扮殑涓滆タ

  1. 澶у姣曠珶涓嶆兂浠庡ご寮€濮嬪仛銆傛帴瑙︿竴涓柊鐨勮璁¤鑼冿紝寰堝彲鑳芥剰鍛崇潃鍏朵笉鎴愮啛锛屽彲鑳借璁¤鑼冭鐨勫緢鏄庣櫧鐨勶紝姣斿瀵硅〃鏍肩殑姣忎竴琛岀殑楂樺害閮芥湁璇存槑锛屼絾鑻﹂€肩殑鏄紝娌℃湁浜哄啓浠ｇ爜鍘昏惤鍦帮紝瀵艰嚧绌烘湁鐞嗚

  2. 杩欎篃鏄紑鍙戞渶鎶佃Е鐨勫湴鏂癸細娌℃湁浜哄幓钀藉湴锛屾渶缁堝彲鑳芥槸浣犱滑寮€鍙戝幓钀藉湴锛屽湪鍥藉唴杩欑澶х幆澧冧笅锛岃€佸ぇ涓嶇浣犻噰鐢ㄤ粈涔堣璁¤鑼冿紝鍙鏈€缁堥」鐩兘澶熸寜鏈熶笂绾垮嵆鍙紝鎵€浠ヤ篃璇疯璁″笀鍚屽澶氬鐞嗚В寮€鍙戝悓瀛﹀惂

  3. 姣曠珶鍙屾柟鐨勭紪杈戞垚鏈笉鍚岋細璁捐甯堝悓瀛﹀湪sketch涓婁竴涓皬鏃跺仛鐨勶紝鍙兘寮€鍙戜滑锛岃鍋氫袱涓夊ぉ锛岃€屼笖杩樿鑰冭檻寰堝瀹為檯鐨勪氦浜掗棶棰橈紝鍜屽悗绔伐绋嬪笀鐨勬暟鎹氦浜掞紝寮傚父鎯呭喌澶勭悊绛夌瓑闂锛岃繕鏈夊氨鏄唬鐮佺殑鎵╁睍鎬х瓑绛夐棶棰?馃槀

瀹岀粨鎾掕姳 馃帀馃帀馃帀馃帀馃帀

鍙傝€冭祫鏂?/h3>
[1]

material design: https://material.io/components/buttons/#outlined-button

 [2]

bootstrap: https://getbootstrap.com/docs/4.3/components/buttons/

 [3]

element: https://element.eleme.io/#/zh-CN/component/button

 [4]

ant design: https://www.antdv.com/components/button/

 [5]

sales force: https://lightningdesignsystem.com/components/buttons/#site-main-content


以上是关于的主要内容，如果未能解决你的问题，请参考以下文章

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数

VSCode自定义代码片段8——声明函数