姒傝堪
鏈泦鎴怉nt Design Vue鐨勫浘鏍囨暀绋嬫棬鍦ㄤ负寮€鍙戣€呮彁渚涘紩瀵硷紝杞绘澗灏嗕笓涓氱骇鍥炬爣娣诲姞鍒板簲鐢ㄤ腑锛屼粠鑰屽寮鸿瑙夋晥鏋滃苟鎻愬崌鐢ㄦ埛浣撻獙銆傛湰鏁欑▼灏嗗甫棰嗗紑鍙戣€呬簡瑙nt Design Vue鍥炬爣搴撶殑鍩虹鐭ヨ瘑銆佸畨瑁呴厤缃柟娉曪紝浠ュ強濡備綍浣跨敤鍥炬爣瀹氬埗鐣岄潰銆備粠鍏ラ棬鍒板疄璺碉紝鏈暀绋嬫彁渚涜缁嗙殑姝ラ鍜岀ず渚嬩唬鐮侊紝甯姪寮€鍙戣€呭揩閫熶笂鎵嬶紝涓洪」鐩娣讳笓涓氬瑙傘€?/p>
寮曡█
鍦╓eb搴旂敤寮€鍙戜腑锛屽浘鏍囨槸鏋勫缓鐢ㄦ埛鐣岄潰涓嶅彲鎴栫己鐨勫厓绱犮€傚畠浠笉浠呭鍔犲簲鐢ㄧ殑缇庤鎬э紝鑰屼笖鑳藉绠€鍖栫敤鎴锋搷浣滐紝鎻愰珮鐢ㄦ埛浣撻獙銆侫nt Design Vue鏄竴娆惧熀浜嶸ue.js鐨勭粍浠跺簱锛屾彁渚涗簡涓板瘜鐨刄I缁勪欢鍜屽伐鍏凤紝鍏朵腑鍖呮嫭楂樿川閲忕殑鍥炬爣搴撱€傞€氳繃闆嗘垚Ant Design Vue鐨勫浘鏍囧簱锛屽紑鍙戣€呭彲浠ヨ交鏉惧湴灏嗕笓涓氬浘鏍囧厓绱犳坊鍔犲埌搴旂敤涓紝鎻愬崌鐣岄潰鐨勮瑙夋晥鏋滃拰鍔熻兘鎬с€?/p>
Ant Design Vue 鍥炬爣搴撳熀纭€
Ant Design Vue鐨勫浘鏍囧簱鎻愪緵浜嗗ぇ閲忔兜鐩栧悇绉嶇敤閫旂殑鍥炬爣锛屽淇℃伅鎻愮ず銆佹搷浣滄寜閽€佸鑸瓑锛屼赴瀵屼簡鐣岄潰璁捐鐨勫彲鑳芥€с€傚叾鐗圭偣鍜屼紭鍔垮涓嬶細
楂樿川閲忓浘鏍囷細鍥炬爣璁捐绮捐壇锛岀鍚堢幇浠I鏍囧噯锛屼负搴旂敤澧炴坊涓撲笟鎰熴€?/p>
鏄撶敤鎬э細閫氳繃绠€鍗曘€佹爣鍑嗗寲鐨勫懡鍚嶅拰浠ｇ爜寮曠敤鏂瑰紡锛屾槗浜庨泦鎴愬拰浣跨敤銆?/p>
鐏垫椿鎬э細鏀寔澶氱灏哄鍜岄鑹茬殑鑷畾涔夛紝閫傚簲涓嶅悓鐨勮璁￠鏍煎拰搴旂敤鍦烘櫙銆?/p>
瀹夎涓庨厤缃?/p>
瑕佸湪鎮ㄧ殑Vue椤圭洰涓娇鐢ˋnt Design Vue鍥炬爣搴擄紝璇烽伒寰互涓嬫楠よ繘琛屽畨瑁呭拰閰嶇疆锛?/p>
1. 纭繚鎮ㄧ殑椤圭洰宸插畨瑁匳ue.js鍜孷ue CLI锛岃繖鏄娇鐢ˋnt Design Vue鐨勫熀鏈墠鎻愩€?/p>
2. 鍦╒ue椤圭洰鐨勬牴鐩綍涓嬭繍琛屼互涓嬪懡浠わ紝鍏ㄥ眬瀹夎Ant Design Vue鍙婂叾鍥炬爣搴擄細
```bash
npm install antd --save
```
鎴栦娇鐢▂arn锛?/p>
```bash
yarn add antd
```
3. 鍦ㄤ富鍏ュ彛鏂囦欢涓紩鍏ュ浘鏍囧簱锛屼緥濡俶ain.js鎴杝rc/main.js锛?/p>
```javascript
import 'antd/dist/antd.css'; // 寮曞叆CSS
import { Icon } from 'ant-design-vue';
Vue.component('a-icon', Icon);
```
4. 鐜板湪鎮ㄥ彲浠ュ湪Vue缁勪欢涓娇鐢ˋnt Design Vue鐨勫浘鏍囦簡銆備緥濡傦紝鍦℉elloWorld.vue缁勪欢涓彲浠ヨ繖鏍蜂娇鐢細
[绀轰緥浠ｇ爜] 鍋囪鎮ㄦ鍦ㄥ紑鍙戜竴涓换鍔＄鐞嗗簲鐢紝鎮ㄥ彲浠ュ湪鐣岄潰涓婁娇鐢ˋnt Design Vue鍥炬爣搴撴潵琛ㄧず涓嶅悓鐨勬搷浣溿€備笅闈㈡槸涓€涓畝鍗曠殑绀轰緥锛? 瀹屾垚浠诲姟 鉂?鍙栨秷浠诲姟 鉁旓笍 鐐瑰嚮鐩稿簲鐨勫浘鏍囧嵆鍙墽琛岀浉搴旂殑鎿嶄綔銆傝繖鏍风殑璁捐绠€鍖栦簡鐢ㄦ埛鎿嶄綔锛屾彁楂樹簡鐢ㄦ埛浣撻獙銆?鎮ㄥ彲浠ユ牴鎹嚜宸辩殑闇€姹傝嚜瀹氫箟鍥炬爣鐨勫昂瀵搞€侀鑹茬瓑鏍峰紡锛屼互閫傚簲涓嶅悓鐨勫簲鐢ㄥ満鏅€備緥濡傚湪涓€涓崥瀹㈠簲鐢ㄤ腑鍒涘缓涓€涓鑸爮锛氶椤?馃摌 鏂囩珷 馃搫 鏀惰棌 鈾?璇勮 馃挰 涓汉涓績 馃懁 銆傛瘡涓鑸」閮戒娇鐢ㄤ簡Ant Design Vue鐨勫浘鏍囨潵澧炲己瑙嗚鏁堟灉鍜岀敤鎴蜂綋楠屻€傞€氳繃瀹炶返杩欎簺绀轰緥浠ｇ爜鎮ㄥ彲浠ユ洿濂藉湴鎺屾彙Ant Design Vue鍥炬爣搴撶殑浣跨敤骞跺皢鍏跺簲鐢ㄥ埌鑷繁鐨勯」鐩腑鎻愬崌搴旂敤鐨勮瑙夋晥鏋滃拰鐢ㄦ埛浣撻獙銆傚簲鐢ㄤ笌瀹炶返 妗堜緥鍒嗕韩 鍋囪鎮ㄦ鍦ㄥ垱寤轰竴涓崥瀹㈠簲鐢ㄥ苟甯屾湜浣跨敤Ant Design Vue鐨勫浘鏍囧簱鏉ュ寮哄鑸拰鎿嶄綔鎸夐挳鐨勫姛鑳芥€у拰缇庤鎬с€備笅闈㈡槸涓€涓畝鍗曠殑瀵艰埅鏍忚璁＄ず渚嬶細 棣栭〉瀵艰埅锛堝甫鏈堿nt Design Vue鐨勨€滀富椤碘€濆浘鏍囷級銆佹枃绔犲鑸紙甯︽湁鈥滄枃绔犫€濆浘鏍囷級銆佹敹钘忓鑸紙甯︽湁鈥滄敹钘忊€濆浘鏍囷級绛変緷娆℃帓鍒楀舰鎴愮洿瑙傜殑瀵艰埅鏍忋€傝繖鏍风殑璁捐涓嶄粎缇庤鑰屼笖鏄撲簬鐢ㄦ埛鐞嗚В鍜屼娇鐢ㄣ€傜粌涔犱笌椤圭洰寤鸿 涓轰簡宸╁浐鎮ㄥAnt Design Vue鍥炬爣搴撶殑鐞嗚В鎮ㄥ彲浠ュ皾璇曚互涓嬬粌涔犲拰椤圭洰寤鸿锛? 缁冧範棰橈細鍦ㄦ偍鐨勫簲鐢ㄤ腑閫夋嫨涓€涓ā鍧楀皾璇曟坊鍔犱竴涓寘鍚嚦灏戜笁绉嶄笉鍚屽姛鑳界殑鑷畾涔夊鑸爮浣跨敤Ant Design Vue鐨勫浘鏍囨潵琛ㄧず杩欎簺鍔熻兘銆備緥濡傚湪涓€涓數鍟嗗簲鐢ㄤ腑鍒涘缓鍟嗗搧鍒嗙被瀵艰埅浣跨敤涓嶅悓鐨勫浘鏍囪〃绀轰笉鍚岀殑鍟嗗搧绫诲埆濡傛湇瑁呫€佺數瀛愪骇鍝佸拰椋熷搧绛夈€傞」鐩缓璁細灏咥nt Design Vue鍥炬爣鏁村悎鍒版偍鐨勪釜浜洪」鐩腑濡備釜浜虹綉绔欑殑渚ц竟鏍忚彍鍗曠敤鎴风晫闈㈢殑鎺т欢鎴栨槸鐭ヨ瘑搴撳簲鐢ㄧ殑鍒嗙被瀵艰埅绛夈€傞€氳繃瀹炶返鎮ㄥ皢鑳藉鏇村ソ鍦版帉鎻nt Design Vue鍥炬爣搴撶殑浣跨敤骞跺厖鍒嗗彂鎸ュ叾鍦ㄩ」鐩腑鐨勪紭鍔挎彁鍗囧簲鐢ㄧ殑鐢ㄦ埛浣撻獙銆?/p> |
