1. vue鏂囦欢钖嶆墿灞曞悕浠ヤ粈涔堢粨灏
Vue 鏂囦欢镄勬墿灞曞悕阃氩父浠.vue缁揿熬銆备竴涓鍏稿瀷镄 Vue 鍗曟枃浠剁粍浠讹纸Single File Component锛夌殑镓╁𪾢钖嶅氨鏄.vue銆
渚嫔傦纴涓涓钖崭负MyComponent.vue镄勬枃浠跺彲鑳藉寘钖涓変釜閮ㄥ垎锛
- <template>锛氱敤浜庡畾涔夌粍浠剁殑 HTML 缁撴瀯銆
- <script>锛氱敤浜庡畾涔夌粍浠剁殑阃昏緫锛岄氩父鍖呮嫭 Vue 缁勪欢镄勯夐”锛埚 data銆乵ethods銆乧omputed 绛夛级銆
- <style>锛氱敤浜庡畾涔夌粍浠剁殑镙峰纺銆
杩欑.vue鏂囦欢镙煎纺浣垮缑 Vue 缁勪欢镄勭粨鏋勫拰鍐呭规洿锷犳竻鏅板拰鏄扑簬绠＄悊銆
𨰾揿𪾢璧勬枡
Vue 镄勭粍浠朵富瑕佹湁浠ヤ笅鍑犵嶏细
- 鍏ㄥ眬缁勪欢锛氱敤“app.component()”鏂规硶𨱒ユ敞鍐岀殑鍏ㄥ眬缁勪欢锛屽彲浠ュ湪搴旂敤镄勪换浣旷粍浠舵ā𨱒夸腑浣跨敤銆
- 灞閮ㄧ粍浠讹细鍦ㄤ竴涓锛堢埗锛夌粍浠朵腑镄“components”阃夐”涓娉ㄥ唽镄勭粍浠躲
- 锷ㄦ佺粍浠讹细镙规嵁缁椤睘镐is缁戝畾鍊肩殑涓嶅悓𨱒ユ覆镆扑笉钖屽悕绉扮殑缁勪欢銆
- 寮傛ョ粍浠讹细鍦ㄥ姞杞介〉闱㈡椂骞朵笉绔嫔嵆娓叉煋锛岃屾槸瑕佺瓑甯︿竴浜涗笟锷￠昏緫瀹屾垚钖庯纴镓崭细镓ц岀粍浠跺唴镄勯昏緫鍜屾覆镆揿埌椤甸溃涓娿
- 镊瀹氢箟鎸囦护锛歏ue 鎻愪緵浜呜嚜瀹氢箟鎸囦护锷熻兘锛屽厑璁镐綘鍒涘缓鍙澶岖敤镄勮屼负銆
- 杩囨浮鍜屽姩鐢伙细Vue 鎻愪緵浜呜繃娓″拰锷ㄧ敾锷熻兘锛屽彲浠ヤ娇鐢 CSS3 杩囨浮鍜屽姩鐢绘潵鍒涘缓骞虫粦镄勫姩鐢绘晥鏋溿
- 鎻掓Ы锛氭彃妲芥槸 Vue 鎻愪緵镄勪竴绉嶆満鍒讹纴鐢ㄤ簬鍦ㄧ粍浠舵ā𨱒夸腑瀹氢箟鍙澶岖敤镄勫唴瀹瑰尯锘熴
- 镊瀹氢箟浜嬩欢锛歏ue 鍏佽镐綘鍒涘缓镊瀹氢箟浜嬩欢锛屽苟鍙浠ュ湪缁勪欢涔嬮棿浼犻掓暟鎹銆
- 琛ㄥ崟鎺т欢锛歏ue 鎻愪緵浜嗕竴浜涜〃鍗曟带浠讹纴濡傝緭鍏ユ嗐佷笅𨰾夋嗐佸崟阃夋嗙瓑銆
- 鐢熷懡锻ㄦ湡阍╁瓙锛歏ue 鎻愪緵浜嗕竴浜涚敓锻藉懆链熼挬瀛愬嚱鏁帮纴鍙浠ュ湪缁勪欢镄勪笉钖岄桩娈垫墽琛岀壒瀹氱殑镎崭綔銆
浠ヤ笂鏄 Vue 镄勪富瑕佺粍浠剁岖被锛屼娇鐢ㄨ繖浜涚粍浠跺彲浠ユ瀯寤哄嚭钖勭嶅嶆潅镄勫墠绔搴旂敤銆
2. vue缂栬疟钖庣殑js鍙岖紪璇戜负vue
1銆佸湪Vue椤圭洰涓瀹夎厀ebpack鍜寁ue-loader銆
2銆佸湪webpack镄勯厤缃鏂囦欢涓钖鐢╯ourcemap銆
2銆侀吨鏂拌繍琛岄”鐩锛屽氨鍙浠ュ湪娴忚埚櫒镄勫紑鍙戣呭伐鍏蜂腑镆ョ湅缂栬疟钖庣殑浠ｇ爜镄勬簮镰佹椠灏勪简銆